构建流程

在开发 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 开发者手册高级主题部分的构建过程页面。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注