title: "区块开发环境" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Devenv - Getting Started - Repos
区块开发环境
本指南将帮助您搭建合适的开发环境,用于创建扩展和修改 WordPress 区块编辑器的区块及其他插件。
区块开发环境包含在计算机上成功开发区块编辑器所需的工具。三个基本要求是:
代码编辑器
代码编辑器用于编写代码。您可以使用任何您最习惯的编辑器。关键在于能够打开、编辑和保存文本文件。
如果您还没有偏好的代码编辑器,Visual Studio Code(VS Code)是核心贡献者中流行的 JavaScript 开发选择。它在三大平台(Windows、Linux 和 Mac)上运行良好,是开源的,并由微软积极维护。VS Code 还拥有一个活跃的社区,提供插件和扩展,包括许多用于 WordPress 开发的插件。
Node.js 开发工具
Node.js (node) 是一个开源运行时环境,允许您在 Web 浏览器之外执行 JavaScript。虽然并非所有 WordPress JavaScript 开发都需要 Node.js,但在使用现代 JavaScript 工具以及为区块编辑器进行开发时,它是必不可少的。
Node.js 及其配套开发工具使您能够:
- 安装和运行区块编辑器开发所需的 WordPress 包,例如
wp-scripts - 使用
wp-env和@wp-playground/cli设置本地 WordPress 环境 - 使用最新的 ECMAScript 功能并以 ESNext 编写代码
- 对 JavaScript 代码进行代码检查、格式化和测试
- 使用
create-block包搭建自定义区块
功能远不止这些。虽然现代 JavaScript 开发可能具有挑战性,但 WordPress 提供了多种工具,例如 wp-scripts 和 create-block,它们简化了开发流程,而这正是由 Node.js 开发工具实现的。
区块开发推荐的 Node.js 版本是 Active LTS(长期支持版)。然而,有时您可能需要使用不同的版本。强烈推荐使用像 nvm 这样的 Node.js 版本管理工具,它允许您在需要时更改 node 版本。您还需要 Node 包管理器 (npm) 和 Node 包执行器 (npx) 来处理一些 WordPress 包。这两者都会随 Node.js 自动安装。
为了能够使用 Node.js 工具以及 WordPress 为区块开发提供的包,您需要在您的机器上设置合适的 Node.js 运行时环境。要了解更多关于如何操作的信息,请参考以下链接。
本地 WordPress 环境
本地 WordPress 环境(站点)为开发提供了一个受控、高效且安全的空间,允许您在将代码部署到生产站点之前进行构建和测试。WordPress 的相同要求也适用于本地站点。
在更广泛的 WordPress 社区中,有许多工具可用于在您的计算机上设置本地 WordPress 环境。区块编辑器手册涵盖了 wp-env,它是开源的,由 WordPress 项目自身维护。它也是 Gutenberg 开发的推荐工具。
有关设置说明,请参阅wp-env 入门指南。
@wp-playground/cli 的引用。这是一个由 WordPress Playground 驱动的轻量级工具,可简化简单本地 WordPress 环境的设置。虽然仍处于实验阶段,但此工具非常适合快速测试 WordPress 版本、插件和主题。
此列表并非详尽无遗,但如果您不想使用 wp-env,这里还有几个额外的选项可供选择: