在开发 WordPress 主题时，考虑是否需要构建流程来帮助你管理主题资源并优化性能会很有用。
在本课中，你将学习更多关于构建流程的知识、为何要使用它们，以及如何使用 @wordpress/scripts 包来设置一个基本的构建流程。
什么是构建流程？
构建流程是一种将源代码文件转换为计算机可读取的最终构建/生产版本的方法。
特别是，主题通常会将源代码压缩或转换为 CSS 或 JavaScript，以便浏览器能够读取。
为什么要使用构建流程？
根据你在主题中使用的技术，你可能需要一个构建流程来帮助你管理主题资源并优化性能。
例如，如果你选择使用 Sass 来编写样式，你将需要一个构建流程来将你的 Sass 文件编译成浏览器可读取的 CSS 文件。
如果你选择使用更现代的语法编写 JavaScript，你将需要一个构建流程来将你的 JavaScript 文件转译成所有浏览器都能执行的格式。
即使你不使用这些选项，构建流程对于优化主题资源仍然很有用，例如压缩 CSS 和 JavaScript 文件以及优化图片。
在创建 WordPress 主题时，你可能会发现自己需要一个构建流程来处理更复杂的项目。有很多系统可供选择，你可以使用任何你喜欢的。
但 WordPress 也提供了 @wordpress/scripts 包，你可以放心它会持续更新，并且应该能满足你大部分的需求。
前置要求
大多数 WordPress 主题开发不需要任何额外的软件。你只需要一个代码编辑器、一个本地开发环境和一个 WordPress 安装。
但要使用构建流程，还有一些其他要求：
- 你需要在本地机器上安装 Node.js 和 npm，这也是构建 WordPress 区块的要求。
- 建议对 webpack 有基本的了解。
- 对 @wordpress/scripts 包有一定熟悉度。
这些工具比通常构建主题所需的工具更高级，但如果你想使用标准的 WordPress 构建流程，它们是必需的。
如果你已经完成了初级开发者学习路径中的区块开发入门模块，你应该已经具备了所有需要的知识。
设置文件和文件夹
@wordpress/scripts 包最初是为区块开发创建的。随着时间的推移，它已经发展到也能与主题一起使用。
默认情况下，它期望开发文件位于 /src 文件夹中，并将构建文件输出到 /build 文件夹。
然而，大多数主题作者会使用自定义系统来处理资源。
假设你的主题有以下结构：
your-theme/
├── resources/
│ ├── js/
│ └── scss/
├── public/
│ ├── js/
│ └── css/
├── style.css
└── functions.php
你的开发 JavaScript 和 Sass 文件分别位于 resources/js 和 resources/scss 文件夹中。当构建流程运行时，你希望它们被输出到 public/js 和 public/css 文件夹。
设置 package.json 文件
第一步，如果你还没有做的话，是初始化 npm 项目。这将在你的主题根目录中创建一个 package.json 文件。
为此，打开你的终端，导航到主题根目录，并运行以下命令：
npm init
系统会提示你输入一些关于项目的信息。你可以按回车接受默认值，或根据自己的喜好更改这些值。
完成设置后，你的主题根目录中会有一个 package.json 文件。
{
"name": "your-theme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
接下来，你需要将 @wordpress/scripts 包作为开发依赖项安装。
为此，在终端中，在你的主题根目录下运行以下命令：
npm install @wordpress/scripts --save-dev
完成后，你会看到 package.json 文件已更新，包含了新的依赖项。
{
"name": "your-theme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^27.9.0"
}
}
最后但同样重要的是，更新 package.json 文件中的 scripts 部分，包含以下内容：
{
"scripts": {
"start": "wp-scripts start --webpack-src-dir=resources --output-path=public",
"build": "wp-scripts build --webpack-src-dir=resources --output-path=public"
}
}
这会创建两个 npm 脚本命令，start 和 build，它们将使用适合你主题的正确配置来运行 @wordpress/scripts 包。
在这种情况下，它会在 resources 文件夹中查找文件，并将它们输出到 public 文件夹。
如果你有不同的文件夹结构，可以调整 --webpack-src-dir 和 --output-path 参数以匹配你的设置。
配置 webpack
@wordpress/scripts 包是基于 webpack 构建的。如果你在构建区块，所有配置都已经为你准备好了。
但是，由于你正在构建主题，你需要用自己的配置覆盖 @wordpress/scripts 包的一些默认配置。
为此，请在主题根目录中创建一个自定义的 webpack.config.js 文件。
// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
// Utilities.
const path = require( 'path' );
// Add any new entry points by extending the webpack config.
module.exports = {
...defaultConfig,
...{
entry: {
'js/editor': path.resolve( process.cwd(), 'resources/js', 'editor.js' ),
'css/screen': path.resolve( process.cwd(), 'resources/scss', 'screen.scss' ),
'css/editor': path.resolve( process.cwd(), 'resources/scss', 'editor.scss' ),
},
plugins: [
// Include WP's plugin config.
...defaultConfig.plugins,
// Removes the empty `.js` files generated by webpack but
// sets it after WP has generated its `*.asset.php` file.
new RemoveEmptyScriptsPlugin( {
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
} )
]
}
};
自定义 webpack 配置可以在 WordPress 开发者手册高级主题部分的构建过程页面中的配置 webpack 章节找到。
这个配置文件为你的自定义 JavaScript 和 Sass 文件设置了入口点，并告诉 webpack 在哪里找到它们。
它还配置了 webpack-remove-empty-scripts，这样就不会有残留的 JavaScript 文件映射到你的 CSS。
运行构建过程
一切设置完成后，你现在可以运行构建过程了。
要启动开发服务器，请在终端中运行以下命令：
npm run start
这将启动开发服务器并监视你的文件变化。当你对 JavaScript 或 Sass 文件进行更改时，构建过程将自动重新编译它们。
要为生产环境构建主题，请在终端中运行以下命令：
npm run build
加载脚本和样式
在关于包含资源的课程中，你已经学会了如何在主题中加载脚本和样式。
当使用构建过程时，你需要加载编译后的文件，而不是源文件。
如果你打开 public/js 文件夹，你会看到构建过程创建了以下文件：
editor.js
editor.asset.php
资源文件返回一个 PHP 数组，其中包含一个依赖项数组和一个 editor.js 文件的版本号。
然后你可以使用这个数组在主题中加载脚本。
首先，使用相关的钩子并在 functions.php 文件中指定钩子回调函数
// Load editor scripts.
add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' );
function themeslug_editor_assets() {
}
在钩子回调函数内部，包含资源文件
$script_asset = include get_theme_file_path( 'public/js/editor.asset.php' );
最后，使用资源文件中的值加载脚本
wp_enqueue_script(
'themeslug-editor',
get_theme_file_uri( 'public/js/editor.js' ),
$script_asset['dependencies'],
$script_asset['version'],
true
);
你的最终代码应该如下所示：
add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' );
function themeslug_editor_assets() {
$script_asset = include get_theme_file_path( 'public/js/editor.asset.php' );
wp_enqueue_script(
'themeslug-editor',
get_theme_file_uri( 'public/js/editor.js' ),
$script_asset['dependencies'],
$script_asset['version'],
true
);
}
对于任何你想要加载的样式表，过程是类似的。
进一步阅读
关于如何使用 @wordpress/scripts 包 设置构建过程的完整指南，你可以参考 WordPress 开发者手册高级主题部分的构建过程页面。