WordPress 5.2 中提到的 @wordpress/scripts 是什么以及怎么使用

WordPress5.2版本发布

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

@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配置来实现。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。