昨天 WordPress 5.2 版本发布了，该版本除了增加 PHP 版本需求到 5.6.20 、增加了一个 wp_body_open 钩子、在安全性上提升之外、还介绍了更新后的 @wordpress/scripts 工具。

简单来说，@wordpress/scripts 工具是为古腾堡模块开发这提供的一个模块构建工具，如果需要了解这个工具的更多信息，请参考古腾堡开发手册中 JavaScript 构建设置一文。

古腾堡支持 ES5 和 ESNext 这两种 JavaScript 语法。ES5 语法 WordPress 的浏览器支持情况相同，可以直接在浏览器中运行，不需要额外的构建步骤。

大多数情况下，使用 ES5 语法开发古腾堡编辑器是很方便的。但是、当我们的代码变得非常多的时候，使用 ESNext 语法可以减少我们的代码量，让我们的代码更便于维护。

新版本的 @wordpress/scripts 包包含了 webpack 和 Babel 配置，也就是说，我们不用再配置 webpack 或 Babel 就可以很方便的开发古腾堡编辑器模块了。

怎么使用 @wordpress/scripts

首先，我们需要安装@wordpress/scripts包：

npm install --save-dev @wordpress/scripts

然后，我们修改 package.json 加入一下两行配置。

"scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
}

运行上面脚本的时候，wp-scripts 会查找src/index.js 文件并将编译后的代码输出到build/index.js。设置好后，开发古腾堡编辑器的流程如下：

1. 安装依赖项： npm install
2. 开始开发构建： npm start
3. 开发、测试
4. 创建生产构建： npm run build

如果你想体验一下这个工具，可以在古腾堡示例代码中随便打开一个示例，使用上面的工具进行开发、构建。

wordpress/scripts 的作用就是为我们提供了一个零配置、开箱即用的古腾堡模块编译工具，来帮我们的快速进行古腾堡模块开发。当然，如果我们需要更复杂的配置，完全可以通过自定义 webpack 和 babel 配置来实现。