61 lines
4.6 KiB
Markdown
61 lines
4.6 KiB
Markdown
|
# 区块开发环境
|
|||
|
|
|
|||
|
|
本指南将帮助您搭建合适的开发环境，用于创建扩展和修改WordPress区块编辑器的区块及其他插件。
|
|||
|
|
|
|||
|
|
区块开发环境包含在计算机上成功进行区块编辑器开发所需的工具。以下三项是基本要求：
|
|||
|
|
|
|||
|
|
- [区块开发环境](#区块开发环境)
|
|||
|
|
- [代码编辑器](#代码编辑器)
|
|||
|
|
- [Node.js开发工具](#nodejs开发工具)
|
|||
|
|
- [本地WordPress环境](#本地wordpress环境)
|
|||
|
|
|
|||
|
|
<div class="callout callout-info">
|
|||
|
|
若想为Gutenberg项目本身做贡献，请参阅<a href="https://developer.wordpress.org/block-editor/contributors/code/getting-started-with-code-contribution">代码贡献指南</a>中的补充文档。
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
## 代码编辑器
|
|||
|
|
|
|||
|
|
代码编辑器用于编写代码。您可以使用任何熟悉的编辑器，关键是要具备打开、编辑和保存文本文件的功能。
|
|||
|
|
|
|||
|
|
如果您还没有偏好的代码编辑器，[Visual Studio Code](https://code.visualstudio.com/)（VS Code）是核心贡献者中进行JavaScript开发的流行选择。它完美兼容三大主流平台（Windows、Linux和Mac），是微软积极维护的开源软件。VS Code还拥有活跃的社区提供插件和扩展支持，其中包含许多适用于WordPress开发的工具。
|
|||
|
|
|
|||
|
|
## Node.js开发工具
|
|||
|
|
|
|||
|
|
Node.js（`node`）是一个开源运行时环境，允许您在网络浏览器之外执行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`](/docs/getting-started/devenv/get-started-with-wp-scripts.md)和[`create-block`](/docs/getting-started/devenv/get-started-with-create-block.md)等工具来简化流程，这些都得益于Node.js开发工具的支持。
|
|||
|
|
|
|||
|
|
**区块开发推荐使用Node.js的[Active LTS](https://nodejs.org/en/about/previous-releases)（长期支持）版本**。但有时您可能需要使用不同版本。强烈推荐使用`nvm`等Node.js版本管理工具，它允许您在需要时切换`node`版本。您还需要Node包管理器（`npm`）和Node包执行工具（`npx`）来处理某些WordPress包，这两者会随Node.js自动安装。
|
|||
|
|
|
|||
|
|
为了使用Node.js工具和[WordPress提供的开发包](https://github.com/WordPress/gutenberg/tree/trunk/packages)进行区块开发，您需要在计算机上配置合适的Node.js运行时环境。具体设置方法请参考以下链接：
|
|||
|
|
|
|||
|
|
- [在Mac和Linux上安装Node.js](/docs/getting-started/devenv/nodejs-development-environment.md#node-js-installation-on-mac-and-linux-with-nvm)
|
|||
|
|
- [在Windows上安装Node.js](/docs/getting-started/devenv/nodejs-development-environment.md#node-js-installation-on-windows-and-others)
|
|||
|
|
|
|||
|
|
## 本地WordPress环境
|
|||
|
|
|
|||
|
|
本地WordPress环境（站点）为开发提供了受控、高效且安全的空间，让您可以在部署到生产站点之前构建和测试代码。WordPress的相同[运行要求](https://en-gb.wordpress.org/about/requirements/)也适用于本地站点。
|
|||
|
|
|
|||
|
|
在更广泛的WordPress社区中，有许多工具可用于在计算机上搭建本地WordPress环境。本《区块编辑器手册》重点介绍由WordPress项目自身维护的开源工具`wp-env`，它也是Gutenberg开发的推荐工具。
|
|||
|
|
|
|||
|
|
具体设置说明请参阅[`wp-env`入门指南](/docs/getting-started/devenv/get-started-with-wp-env.md)。
|
|||
|
|
|
|||
|
|
<div class="callout callout-info">
|
|||
|
|
在本手册中，您可能还会看到对<code><a href="https://github.com/WordPress/wordpress-playground/tree/trunk/packages/playground/cli">@wp-playground/cli</a></code>的引用。这是一个由<a href="https://developer.wordpress.org/playground/">WordPress Playground</a>驱动的轻量级工具，可简化本地WordPress环境的搭建。虽然仍处于实验阶段，但该工具非常适合快速测试WordPress版本、插件和主题。
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
以下列举了部分备选方案（若您不想使用`wp-env`）：
|
|||
|
|
|
|||
|
|
- [WordPress Studio](https://developer.wordpress.com/studio/)
|
|||
|
|
- [Local](https://localwp.com/)
|
|||
|
|
- [XAMPP](https://www.apachefriends.org/)
|
|||
|
|
- [MAMP](https://www.mamp.info/en/mamp/mac/)
|
|||
|
|
- [Varying Vagrant Vagrants](https://varyingvagrantvagrants.org/)（VVV）
|