构建过程是将源代码文件转换为计算机可以读取的最终构建/生产版本的方法。特别是，主题通常会缩小或将源代码转换为CSS或JavaScript，以便浏览器可以阅读。
在创建WordPress主题时，您可能会发现自己需要一个构建过程来处理更复杂的项目。有许多系统可供选择，您可以使用任何您喜欢的系统。但是WordPress也提供了一个标准的软件包，您可以确信它会不断更新，并且应该能够满足您的大部分需求。
在本文中，您将学习如何与@wordpress/脚本包来处理主题的构建过程。
大多数WordPress主题开发都是即插即用的。您只需要在某种类型的开发环境中安装代码编辑器和WordPress，如工具和设置。但要使用构建过程，还有一些其他要求：
这些工具比构建主题通常需要的工具更高级，但如果您想使用标准的WordPress构建过程，它们是必需的。
这个@wordpress/脚本这个包最初是为块开发而创建的，但随着时间的推移，它也逐渐演变为与主题一起工作。默认情况下，它希望开发文件位于/src公司文件夹，并将生成文件输出到/建造文件夹。因为大多数主题作者都使用自定义系统来处理资产，所以本指南将向您展示如何做到这一点。
对于以下示例，您将在主题文件夹中使用此结构：
公众/资源/
package.json包webpack.config.js
设置好文件和文件夹后，需要在本地计算机上安装正确的软件包。
首先，打开主题package.json包文件并添加以下代码：
{“name”：“your-project-name”，“脚本”：{“start”：“wp-scripts start--webpack-src-dir=resources--output-path=public”，“build”：“wp-scripts build--webpack-src-dir=resources--output-path=public”}}
这个@wordpress/脚本包中还有其他几个可用脚本你可以添加，但你肯定需要开始和建造.
现在打开计算机上的命令行工具，导航到主题文件夹，然后输入以下命令：
npm install@wordpress/scripts路径webpack-remove-empty-scripts--save-dev
该命令安装三个软件包：
@wordpress/脚本路径webpack-remove-empty-scripts
后两个是第三方软件包，但它们对于下一步与webpack集成很有用。
这个@wordpress/脚本包构建在webpack之上。如果你在建造一个街区，一切都会为你准备好。但是，由于您正在构建主题，因此需要覆盖@wordpress/脚本用你自己的包装。
这就是你的主题的定制webpack.config.js文件。您需要配置以下两项主要内容：
- 自定义CSS和JavaScript文件的入口点（下面代码中的那些对应于本文中的文件结构）。
- 这个
webpack-remove-empty-scripts插件，这样就没有剩余的.js文件映射到CSS的文件。
将以下代码添加到您的webpack.config.js文件：
//WordPress网络包配置。const defaultConfig=require（'@wordpress/scripts/config/webpack.config'）；//插件。const RemoveEmptyScriptsPlugin=require（'webpack-remove-empty-scripts'）；//公用事业。const path=require（“路径”）；//通过扩展webpack配置添加任何新的入口点。模块导出={…默认配置，...{条目：{“js/editor”：路径.resolve（process.cwd（），“resources/js”，“editor.js”），“css/screen”：路径.resolve（process.cwd（），“resources/scss”，“screen.scss”），“css/editor”：路径.resolve（process.cwd（），“resources/scss”，“editor.scss”），},插件：[//包括WP的插件配置。…默认配置插件，//删除webpack生成的空“.js”文件，但//在WP生成其`*.asset.php`文件后设置。新的RemoveEmptyScriptsPlugin（{阶段：RemoveEmptyScriptsPlugin。阶段_ FTER_PROCESS_PLUGINS} )]}};
要使用WordPress脚本包处理资产，可以在命令行工具中运行以下两个命令之一：
开始：生成文件的开发版本并激活“监视”模式，该模式将在启用时处理任何代码更改。建造：生成文件的生产版本。
现在打开命令行工具并运行开始命令：
npm运行启动
它应该自动处理来自/资源文件夹并将其放置在/公众具有此结构的文件夹：
公众/
js型/
scss系统/
编辑.scss编辑资产.php屏幕.scss屏幕.asset.php
你现在会看到新的*.asset.php文件为每个CSS和JavaScript文件生成的文件。这些将包含加载文件时可以使用的每个资产文件的元数据。这在下面的“加载脚本和样式”部分中介绍。
要禁用开始命令，键入Ctrl+C组合键（在Windows或Mac上）。
准备好对文件进行最终生产构建后，请在命令行工具中运行以下命令：
npm运行生成
加载脚本和样式的方法已经在包括资产本手册中的文档。在继续进行下一步之前，您应该已经熟悉如何执行此操作。
下面的文档主要用于教您如何*.asset.php文件为每个资产生成文件。在每个文件中，您将看到一个类似于以下代码段的数组：
<?php返回数组（“dependencies”=>数组（“wp-block-editor”），“version”=>“2eae4c519afeff2a8c77”）；
特别是，该数组将有两段元数据，您可以在任何wp_enqueue_*（）功能：
依赖关系:脚本/样式所依赖的依赖项数组。版本:可以用于缓存破坏的版本号。
因为文件返回数组，所以可以使用PHP包括将数组赋给代码中的变量。以下示例显示如何获取屏幕资产.php文件：
$asset=包含get_theme_file_path（'public/css/screen.asset.php'）；//返回：数组（“dependencies”=>array（），“version”=>“0000”）；
使用以下任一方法加载脚本或样式时wp_enqueue_script（）或wp_enqueue_style（），你可以通过$资产[“依赖关系”]和$asset[“版本”]对应于函数中的参数。
尝试将以下代码添加到主题函数.php文件以加载先前定义的资产：
//加载前端资源。add_action（'wp_enqueue_scripts'，'themeslug_assets'）；函数themeslug_assets（）{$asset=包含get_theme_file_path（'public/css/screen.asset.php'）；wp_排队_样式(“主题音乐风格”，get_theme_file_uri（“public/css/screen.css”），$asset[“依赖关系”]，$asset[“版本”]);}//加载编辑器样式表。add_action（'after_setup_theme'，'themeslug_editor_styles'）；函数themeslug_editor_styles（）{添加编辑器样式（[get_theme_file_uri（'public/css/screen.css'）] );}//加载编辑器脚本。add_action（“enqueue_block_editor_assets”，“themeslug_editor_assets”）；函数themeslug_editor_assets（）{$script_asset=包含get_theme_file_path（'public/js/editor.asset.php'）；$style_asset=包括get_theme_file_path（'public/css/editor.asset.php'）；wp_排队_脚本('主题日志编辑器'，get_theme_file_uri（'public/js/editor.js'），$script_asset[“依赖关系”]，$script_asset[“版本”]，真的);wp_排队_样式('主题日志编辑器'，get_theme_file_uri（“public/css/editor.css”），$style_asset[“依赖关系”]，$style_asset[“版本”]);}