在开发 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文件夹中。
然而，大多数主题作者使用自定义系统来处理资源。
假设您的主题有以下结构：
my-theme/
├── public/
├── resources/
│ ├── js/
│ ├── scss/
您的开发JavaScript和Sass文件分别位于resources/js和resources/scss文件夹中。当构建流程运行时，您希望它们输出到public/js和public/css文件夹中。
设置package.json文件
如果尚未完成，您的第一步是初始化npm项目。这将在主题根目录中创建一个package.json文件。
为此，打开终端，导航到主题根目录，并运行以下命令：
npm init
系统会提示您输入一些项目信息。您可以按回车键接受默认值，或根据需要更改值。
完成设置后，您将在主题根目录中看到一个package.json文件。
{
"name": "javascript-enabled",
"version": "1.0.0",
"description": "JavaScript Enabled Theme",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jonathan Bossenger",
"license": "GPL-2.0-or-later"
}接下来，您需要将@wordpress/scripts包安装为开发依赖项。
为此，在主题根目录的终端中运行以下命令：
npm install @wordpress/scripts path webpack-remove-empty-scripts –save-dev
完成后，您将看到package.json文件已更新为新依赖项。
{
"name": "javascript-enabled",
"version": "1.0.0",
"description": "JavaScript Enabled Theme",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jonathan Bossenger",
"license": "GPL-2.0-or-later",
"devDependencies": {
"@wordpress/scripts": "^27.8.0",
"path": "^0.12.7",
"webpack-remove-empty-scripts": "^1.0.4"
}
}最后但同样重要的是，更新package.json文件的scripts部分以包含以下内容：
{
"name": "javascript-enabled",
"version": "1.0.0",
"description": "JavaScript Enabled Theme",
"main": "index.js",
"scripts": {
"start": "wp-scripts start --webpack-src-dir=resources --output-path=public",
"build": "wp-scripts build --webpack-src-dir=resources --output-path=public"
},
"author": "Jonathan Bossenger",
"license": "GPL-2.0-or-later",
"devDependencies": {
"@wordpress/scripts": "^27.8.0",
"path": "^0.12.7",
"webpack-remove-empty-scripts": "^1.0.4"
}
}这将创建两个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
asset文件返回一个PHP数组，其中包含editor.js文件的依赖项数组和版本号。
然后，您可以使用此数组在主题中排队脚本。
首先，使用相关的钩子并在functions.php文件中指定钩子回调
// Load editor scripts.
add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' );
function themeslug_editor_assets() {
}在钩子回调中，包含asset文件
$script_asset = include get_theme_file_path( 'public/js/editor.asset.php' );最后，使用asset文件中的值排队脚本
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开发者手册高级主题部分的构建流程页面。