这 @wordpress/scripts 包，通常称为wp-scripts，是一组配置文件和脚本，主要旨在标准化和简化需要JavaScript构建步骤的WordPress项目的开发过程。
JavaScript构建步骤是指转换，捆绑和优化JavaScript源代码和相关资产为适合生产环境的格式的过程。这些构建步骤通常采用现代JavaScript（ESNEXT和JSX），并将其转换为与大多数浏览器兼容的版本。他们还可以将多个文件捆绑到一个，缩小代码以减少文件大小并执行各种其他任务以优化代码。
在为Block编辑器构建时，通常会与Esnext和JSX合作，而Block Editor手册中的大多数示例都是用这些语法编写的。学习如何建立构建步骤至关重要。但是，配置必要工具，例如 webpack，别贝，和 eslint 可以变得复杂。这是哪里wp-scripts进来。
这是一些东西wp-scripts可以做：
- 汇编： 使用Babel将Modern JavaScript（ESNEXT和JSX）转换为与大多数浏览器兼容的代码。
- 捆绑： 使用WebPack将多个JavaScript文件组合到一个捆绑包中，以提高性能。
- 代码覆盖： 提供ESLINT的配置，以帮助确保代码质量和符合编码标准。
- 代码格式： 合并更漂亮的自动代码样式，以保持整个项目的一致代码格式。
- SASS汇编： 将SASS（.scs或.sass）文件转换为标准CSS。
- 代码缩小： 减少用于生产的JavaScript代码的大小，以确保页面负载更快。
该软件包将与现代WordPress的JavaScript开发相关联的大部分初始设置，配置和样板代码。然后，您可以专注于构建块和块编辑器扩展。
快速开始
如果您使用@wordpress/create-block 包装脚手架的包装结构创建和注册一个块所需的文件，您还将获得现代的JavaScript构建设置（使用wp-scripts）无需配置，因此您无需担心安装wp-scripts或重新启用资产。参考 开始create-block 更多细节。安装
确保您有node.js和npm安装在计算机上。查看 Node.js开发环境 指南如果不是。
然后，创建一个项目文件夹并确保它包含一个package.json文件，build文件夹和一个src文件夹。这src文件夹还应包括一个index.js文件。
如果您没有创建package.json之前文件，请导航到终端中的项目文件夹并运行npm init命令。互动提示将带您完成步骤。随心所欲配置，但是当它要求“入口点”时，请输入build/index.js。
当然，有很多方法可以使用wp-scripts，但这是整个块编辑手册中使用的建议方法。
最后，安装wp-scripts通过运行该命令，软件包作为开发依赖性：
npm install @wordpress/scripts --save-dev
安装完成后，您的项目文件夹应该看起来像这样：
example-project-folder/
├── build/
├── node_modules/ (autogenerated)
├── src/
│ └── index.js
├── package-lock.json (autogenerated)
└── package.json
基本用法
安装后，您可以运行提供的预定义脚本wp-scripts通过在您的脚本部分中引用它们package.json文件。这是一个例子：
{
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
}
}
然后可以使用命令运行这些脚本npm run {script name}。
WP-Scripts的构建过程
您最常使用的两个脚本是start和build由于他们处理构建步骤。看到 包装文档 对于所有选项。
从事您的项目时，请使用npm run start命令。这将启动开发服务器，并在检测到任何更改时自动重建项目。请注意，在build/index.js不会优化。
准备部署项目时，请使用npm run build命令。这样可以优化您的代码并准备生产。
构建完成后，您将看到创建的编译JavaScript文件build/index.js。
Abuild/index.asset.php文件还将在构建过程中创建，其中包含依赖项和一个版本号（用于缓存破坏）。请注意，在没有此的情况下注册一个块wp-scripts构建过程您需要手动创建*.asset.php依赖项文件（请参阅 例子）。
入门资产
如果您通过register_block_type定义的脚本block.json将被自动入选（请参阅 例子）
要在任何其他情况下，要在编辑器中手动结合文件，您可以参考 编辑中的资产 指南以获取更多信息，但这是典型的实现。
/**
* Enqueue Editor assets.
*/
function example_project_enqueue_editor_assets() {
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
wp_enqueue_script(
'example-editor-scripts',
plugins_url( 'build/index.js', __FILE__ ),
$asset_file['dependencies'],
$asset_file['version']
);
}
add_action( 'enqueue_block_editor_assets', 'example_project_enqueue_editor_assets' );
这是 一个例子 编辑器中的手动启动文件。
下一步
尽管start和build将是两个最常用的脚本，还有其他一些有用的工具wp-scripts值得探索。这是一些。
保持代码质量
为了帮助开发人员提高代码的质量，wp-scripts与Eslint和Prettier这样的工具预先配置。ESLINT确保您的JavaScript遵守最佳实践和 WordPress编码标准，而Prettier会自动格式化您的代码。可用脚本包括：
{
"scripts": {
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
}
}
定期裁剪和格式化您的代码可确保其功能，清晰且可维护您和其他开发人员。
运行测试
除了编写代码外，验证其功能至关重要。wp-scripts包括 笑话，JavaScript测试框架，以及端到端和单元测试脚本：
{
"scripts": {
"test:e2e": "wp-scripts test-e2e",
"test:unit": "wp-scripts test-unit-js"
}
}
单位测试验证代码的单个单位，例如功能，确保它们按预期工作，而端到端（E2E）测试通过模拟真实世界用户场景来确保系统的所有部分都可以无缝地工作来评估整个项目。
高级配置
尽管wp-scripts提供可靠的默认配置，在某些情况下，您需要更多的专业设置。好消息是wp-scripts具有高度适应性。例如，您可以扩展和覆盖默认的WebPack配置，使您可以添加加载程序和插件或修改构建过程的几乎任何部分。这种灵活性可确保随着项目的增长或要求的变化，wp-scripts可以根据您不断发展的需求量身定制。
看到wp-scripts包装文档 对于所有配置选项。
其他资源
- @wordpress/脚本（官方文件）
- WebPack和WordPress软件包如何交互（WordPress开发人员博客）