高级WordPress开发：如何使用wp-scripts创建下一个项目

代理公司的 WordPress 开发工作在最好的情况下也会竞争激烈。它要求在多个客户项目中保持最高的效率和一致性。

无论你是多么老练的开发人员，管理整个定制主题和插件的组合仍然需要在简化工作流程方面付出长期的努力。wp-scripts 是一套功能强大的实用工具，它能彻底改变你的公司对 WordPress 的开发方式。

本综合指南将介绍 wp-scripts 的功能，并探讨构建流程的技巧。在整个过程中，它将涵盖优化编译和捆绑、自动内衬、单元测试等内容–如果你同时兼顾多个高风险的 WordPress 项目，那么所有这些内容都与你息息相关。

构建流程的概念

在了解 wp-scripts 的具体细节之前，我们先来了解一下网站开发构建流程的大概念。这包括一系列自动化任务，帮助将源代码转化为可投入生产的应用程序或网站。

例如，有很多工作都可以通过这种方式从自动化中获益：

• 将现代 JavaScript 编译成与浏览器兼容的代码。
• 将 CSS 预处理器语言（例如 Sass）转换为标准 CSS。
• 最小化和优化 JavaScript、CSS 和媒体等资产。
• 运行 linters 以捕捉潜在错误并执行编码标准。
• 执行单元测试，确保更好的代码功能。

对于任何开发工作流程来说，这些都是可以实现自动化的方面，但对于机构来说，这一流程同样至关重要。首先，您可以在多个项目（和您的团队）中保持一致性。

您还可以通过更快的周期进行开发和部署，并利用一致性维护所有项目，即使是最复杂的项目也不例外。对于最终用户而言，您所获得的优化性能将惠及他们的整体体验。

通常情况下，您的机构可能会使用 Gulp、Grunt 等工具或甚至手动流程“拼凑”自定义构建流程。然而，这些方法往往会导致项目之间的不一致性，更不用说大量的维护开销了。

wp-scripts：改变机构内WordPress开发工作流程的工具

就 WordPress 而言，构建流程也可以大大简化主题和插件的开发。它可以让您使用现代工具和实践，同时确保平台兼容性。

@wordpress/scripts 包（本文中为wp-scripts）是一组配置文件和脚本，可帮助您简化 WordPress 项目的构建流程。

wp-scripts 参考资料的一部分，用于项目将使用的各种脚本。

Make WordPress 核心团队负责开发和维护该软件包，它是块编辑器和站点编辑器不可或缺的一部分。最重要的是，你还可以用它来定制主题和开发插件。

对于机构内的大规模 WordPress 开发而言，wp-scripts将是工作流程的核心部分。它不仅仅是一个简单的构建工具；它是现代 WordPress 项目的全面解决方案，符合复杂开发工作流程的需要。

wp-scripts的关键功能

随着更多现代 JavaScript 实践渗入 WordPress 生态系统，我们需要更多标准化的构建工具来适应它们。以 wp-scripts 为形式的统一构建工具集有利于整个WordPress开发生态系统。

因此，wp-scripts 提供了一系列功能，使 WordPress 开发更加高效：

• 零配置设置。您无需进行复杂的 webpack 配置即可开始使用。
• 现代 JavaScript 支持。您的 ES6 代码将转译以兼容浏览器，让您对代码的准确性更有信心。
• 内置 CSS 处理。如果您使用 CSS 预处理器（如 Sass），您将获得开箱即用的支持。
• 代码质量工具。软件包集成了 ESLint 和 Prettier，可确保代码风格和质量的一致性。
• 测试工具。软件包中的 Jest 可用于单元测试和轻松执行。
• 热重载。如果能实时重载更改，就能加快开发时间。

综合来看，wp-scripts 为管理多个 WordPress 项目的机构提供了许多关键优势。例如，您可以将每个项目的开发环境标准化，还可以在任何新项目中复制构建过程。该软件包可让您集中构建工具的依赖关系，从而使更新和安全补丁更易于管理。

总之，您可以减少对兼容性问题的担心，缩短设置时间，并消除在简化构建过程中出现的许多典型错误。

将wp-scripts与典型的WordPress开发流程进行比较

典型的WordPress开发通常涉及使用手动排队来获取脚本和样式。此外，您还可能编写虚幻的 JavaScript 或 jQuery，并依赖第三方构建工具，或者根本不使用构建流程。

相比之下，wp-scripts 在几乎所有领域都提供了现代化的集成方法：

总的来说，wp-scripts 提供了更大的灵活性，这要归功于它集成了你可能尚未使用的工具。例如，设置 PostCSS、webpack 或 Jest 的工作可能会因为时间限制而被省略。

如何设置开发环境以纳入wp-scripts

使用 wp-scripts 有其自身的要求，但你很可能已经在使用这些工具了。如果有必要，请安装 Node.js 和 npm，同时安装本地 WordPress 开发环境。

DevKinsta 主界面。

如果你已经使用 create-block 软件包来开发 WordPress Block 插件，则会将 wp-scripts 与其他资产一起安装。从这里，您可以开始建立一个软件包开发项目。

使用wp-scripts创建新的WordPress项目

您将在 WordPress 安装的 wp-content 目录中开展工作。具体子目录与你创建的项目类型有关：wp-content/themes 用于主题，wp-content/plugins 用于插件！

无论如何，你的项目文件夹都应包括一些文件和目录：

• package.json 文件。
• 构建目录。
• 包含 index.js 文件的 src 目录。

要创建 package.json 文件，请使用终端或命令行应用程序导航到项目目录。运行 npm init 命令将完成交互式设置过程，“入口点”应为build/index.js ：

npm init 过程的部分运行，显示入口点值提示。

接下来，将 wp-scripts 安装为开发依赖项：

npm install @wordpress/scripts --save-dev

你还会看到一些自动生成的目录和文件：node_modules 和package-lock.json。无论如何，你现在需要在 package.json 文件中引用预定义脚本：

"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
}

您可能会经常返回该文件，以便在需要时添加更多脚本。例如：

…
"lint:js": "wp-scripts lint-js",
"lint:css": "wp-scripts lint-style",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"test": "wp-scripts test-unit-js"
…

您可能还需要在此处对主题或插件资产进行排队，然后保存更改。

使用wp-scripts理解并使用webpack

在引擎盖下捆绑资产时，wp-scripts 会使用 webpack。虽然了解 Webpack 的作用可以帮助你更有效地利用 wp-scripts，但你并不需要对其进行配置。Webpack 在你的设置中承担了很多责任：

• 它可以帮助解决 JavaScript 模块之间的依赖关系。
• 它可以将现代 JavaScript 转换为兼容浏览器的代码。
• 它可以帮助处理和优化样式。
• 生成源映射，让调试更轻松。
• 它还能帮助你创建可用于生产的最小化捆绑包。

在 wp-scripts 中已经有了默认的 webpack 配置。这对大多数 WordPress 项目都很有效。但在某些情况下，您可能需要创建自定义配置。

针对机构设置的高级webpack配置

虽然默认的 webpack 配置是大多数开发项目的理想选择，但有时您也需要根据自己的特定需求创建配置。例如，您可能需要处理复杂的主题结构或独特的插件架构。这时，项目根目录中的 webpack.config.js 文件就会派上用场：

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
main: path.resolve(__dirname, 'src/js/main.js'),
admin: path.resolve(__dirname, 'src/js/admin.js'),
// Add more entry points as needed
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
// Add custom loaders or plugins here
};

这种配置允许多个入口点，对于需要为 WordPress 管理或前台的不同部分分别编写脚本的主题或插件来说尤其有用。因此，你可以扩展默认配置，并保持 wp-scripts 的优势。

使用wp-scripts的基础知识

有了合适的开发环境和正确的文件与文件夹结构，你就可以开始使用wp-scripts 了。有几个基本的核心命令会占用你大部分时间。

start 命令会监控文件变化，即时重新编译资产，并提供热重载功能，让开发体验更加流畅：

npm run start

你可以在项目开始时使用它来启动开发服务器，不过它不会优化 build/index.js 文件中的编译代码。

当需要部署项目时，build 命令将为生产编译资产：

npm run build

运行后，它会执行一些任务。例如，它会转译 JavaScript、将 Sass 和 SCSS 编译成 CSS、最小化所有资产并生成源映射。最后，它会将所有内容输出到 build/index.js 文件中。构建过程还会创建一个 build/index.asset.php 文件，用于缓存。

wp-scripts 软件包还提供了几条 linting 命令，帮助你保持代码的高质量：

• npm run lint:js。用它来检查 JavaScript 文件。
• npm run lint:css。用于检查 CSS 或 Sass 文件。
• npm run lint:pkg-json。用于验证package.json文件。

对于单元测试，只需调用 npm run test，它就会使用 Jest 执行测试套件。

探索wp-scripts中的核心工具

基本的构建任务可能会耗费你很长时间，典型的命令需要大量的自动化操作。不过，wp-scripts提供了一套复杂的实用程序，可以满足 WordPress 开发的复杂需求：

• 高级编译。通过优化配置，您可以转译现代 JavaScript（包括 ECMAScript Modules (ESM) 和 Javascript XML (JSX)）并编译 Sass。
• 智能捆绑。您可以利用 webpack 的代码拆分和“树状结构”来优化资产交付。
• 全面的内衬。您可以在 JavaScript、CSS 和 package.json 文件中执行编码标准。
• 集成测试。通过 Jest，您可以运行单元测试和覆盖率报告。
• 开发服务器。您可以利用热重载功能实现跨多个项目的快速开发。

无论您是开发主题还是插件，您都可以扩展每个项目的默认功能，从而利用更个性化的 WordPress 开发流程。

处理 JSX 和现代 JavaScript

许多 WordPress 项目都使用了现代 JavaScript 元素，如 React 组件、箭头函数、重构、async/await 等。甚至核心代码库的某些方面，如块编辑器，也使用现代 JavaScript 来构建其功能。

但是，浏览器并不能原生理解这些高级语法，因此需要进行更多的转译和编译工作。

JSX 可让您在 JavaScript 中编写类似 HTML 的代码，从而更容易描述界面和其他元素的外观。首先，这可以提高可读性和可维护性。您还可以使用强大的 React 组件来创建动态用户界面（UI）。

wp-scripts 使用 Babel JavaScript 编译器将现代 JavaScript 和 JSX 转换成浏览器可以理解的代码。它会处理所有复杂和必要的配置，让你专注于编写代码。

您可以通过 src/index.js 文件利用它。请看这个小例子，了解如何使用 wp-scripts 实现 JSX 和现代 JavaScript：

import { render } from '@wordpress/element';
// Modern JavaScript feature: Arrow function
const HelloWorld = () => {
// Modern JavaScript feature: Template literal
const greeting = `Hello, ${wp.data.select('core/editor').getCurrentPost().title}!`;    
// JSX
return (
<div className="hello-world">
<h1>{greeting}</h1>
<p>This is a React component in WordPress!</p>
</div>
);
};
// Modern JavaScript feature: Optional chaining
const rootElement = document.getElementById('hello-world-root');
if (rootElement?.innerHTML) {
render(<HelloWorld />, rootElement);
}

您还必须在主题的 functions.php 文件或主插件文件中启用脚本：

function enqueue_hello_world_script() {
wp_enqueue_script(
'hello-world-script',
get_template_directory_uri() . '/build/index.js',
['wp-element'],
filemtime(get_template_directory() . '/build/index.js'),
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_hello_world_script');

运行 npx wp-scripts build 命令后，wp-scripts 将对现代 JavaScript 和 JSX 进行转译，以创建与浏览器兼容的 build/index.js 文件。

代码质量检查和复杂的着色

wp-scripts 软件包包含多种工具，可帮助你保持代码质量，并在整个项目中执行一致的风格： 除了 ESLint 和 Prettier，您还可以访问 stylelint 进行 CSS 和 SCSS 检查。

第一步是将inting 脚本添加到 package.json 文件中：

"scripts": {
"lint:js": "wp-scripts lint-js",
"lint:css": "wp-scripts lint-style",
"lint": "npm run lint:js && npm run lint:css"
}

接下来，在项目根目录下创建自定义配置文件。例如，ESLint 要求你在 .eslintrc.js 文件中工作。该示例（部分）强制要求在 JavaScript 代码中使用模板字面量来表示字符串：

…
module.exports = {
extends: [
'plugin:@wordpress/eslint-plugin/recommended',
],
rules: {
// Custom rules here
'no-console': 'error',
'react-hooks/exhaustive-deps': 'warn',
'prefer-template': 'error',
},
};
…

要使用 stylelint，需要编辑 .stylelintrc.js 文件：

…
module.exports = {
extends: [
'@wordpress/stylelint-config/scss',
],
rules: {
// Custom rules here
'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',
'max-nesting-depth': 3,
},
};
…

如果您在多个项目中维护一个庞大的代码库，拥有一致的代码风格至关重要。这样，你就可以扩展默认的 ESLint 和 stylelint 配置，以执行你的机构的编码标准。

在这里，你可以运行 npm run lint 来启动这一过程，并使用特定的线程类型进行扩展。例如，如果您的代码中存在一些典型的连接…

const name = "World";
console.log("Hello " + name + "!");

……运行 npm run lint:js 会提示错误，并建议您使用模板文字代替：

const name = "World";
console.log(`Hello ${name}!`);

这是检查 WordPress 主题或插件代码的重要方法，可让您根据具体需求和标准定制规则集。

单元测试

单元测试对于确保代码库的可靠性和可维护性至关重要。wp-scripts 使用的测试框架工具是 Jest。

运行测试命令时，Jest 会查找带有 .test.js 或 .spec.js 扩展名的文件，或__tests__目录中的文件。然后运行这些文件中定义的测试并报告结果。

您首先需要在 package.json 文件中引用测试脚本：

…
"scripts": {
"test": "wp-scripts test-unit-js"
}
…

如果需要，可创建一个文件，如 src/utils.js ：

…
export function capitalizeString(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export function sum(a, b) {
return a + b;
}
…

从这里创建一个测试文件，如 src/__tests__/utils.test.js ：

import { capitalizeString, sum } from '../utils';
describe('capitalizeString', () => {
it('capitalizes the first letter of a string', () => {
expect(capitalizeString('hello')).toBe('Hello');
});
it('returns an empty string if given an empty string', () => {
expect(capitalizeString('')).toBe('');
});
});
describe('sum', () => {
it('adds two numbers correctly', () => {
expect(sum(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(sum(-1, 1)).toBe(0);
});
});

运行 npm run test 命令后，wp-scripts 会自动查找并执行所有以 .test.js 为扩展名的文件。您还可以扩展默认的 Jest 配置，以支持任何高级测试需求，例如测试覆盖率：

// jest.config.js
const defaultConfig = require('@wordpress/scripts/config/jest-unit.config');
module.exports = {
...defaultConfig,
setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
collectCoverageFrom: [
'src/**/*.js',
'!src/tests/**/*.js',
'!src/vendor/**/*.js',
],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};

此配置添加了一个自定义设置文件，指定了要包含在覆盖率报告中的文件，并设置了覆盖率阈值，以确保在整个项目中实现全面的测试覆盖率。运行这些测试时，Jest 会提供输出，显示所有通过和未通过的测试。

通过这种方式扩展单元测试功能，可以大大提高 WordPress 主题和插件的质量和可靠性，并简化整个开发流程。

如何将wp-scripts集成到工作流程中

wp脚本的使用范围非常广泛。为了说明这一点，让我们回顾一下使用 wp-scripts 自动执行典型任务的一些快速方法。

创建可重复使用的项目模板

您可能需要经常启动新项目，甚至可能每天都需要。通过预配置wp-scripts 创建自定义项目模板，可以节省大量设置时间。

你可以从一个基础项目开始：一个包含 wp-scripts 设置的新 WordPress 主题或插件：

mkdir my-agency-base-theme
cd my-agency-base-theme
npm init -y
npm install --save-dev @wordpress/scripts

接下来，设置项目结构，创建必要的目录和文件：

mkdir src build
touch src/index.js src/style.scss
touch functions.php style.css

此时，您需要配置 wp-scripts，并用相关命令更新 package.json 文件：

{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"lint:js": "wp-scripts lint-js",
"lint:css": "wp-scripts lint-style",
"test": "wp-scripts test-unit-js"
}
}

在此基础上，您还可以为 webpack、ESLint 和 stylelint 创建配置。

为使该模板可重复使用且易于访问，GitHub repo 是理想的选择。例如，考虑 https://github.com/your-agency/theme-template.git 的远程源。

当你开始一个新项目时，可以直接运行一个命令：

npx create-wordpress-theme@latest my-new-theme --template your-agency/theme-template

这将克隆你的模板 repo，并使用预定义的 wp-scripts 配置设置一个新主题。

您可以通过添加特定机构的模板代码（如常用函数或组件）来进一步自定义模板。重要的是要保持该模板库的最新状态，使用最新的wp-scripts版本，并实施您决定的任何工作流程改进。

版本控制和协作

说到 wp-scripts 和版本控制，你可以做得更多。但通常情况下，你应该实施一些典型的做法，以确保代码的高质量：

• 在版本控制中包含 package.json 和 package-lock.json。这样可以确保所有团队成员使用相同的依赖关系。
• 确保在 .gitignore 文件中包含 /build 和 /node_modules 等构建工件。
• 在提交 package.json 文件之前，确保在其中引用了所有需要的脚本。
• 考虑使用 .nvmrc 文件为项目指定正确的 Node.js 版本。

您可以选择通过 Husky 等工具实施预提交钩子。例如，这就是在每次提交前运行线程的好方法：

…
"husky": {
"hooks": {
"pre-commit": "npm run lint:js && npm run lint:css"
}
}
…

这样，你就能确保在提交和推送前自动进行校验和运行测试。这也是在整个团队中保持代码质量的另一种方法。

持续集成和持续部署（CI/CD）

将wp-scripts 集成到 CI/CD 管道中可以简化主题和插件的部署流程。GitHub Actions 只是将其集成到 wp-scripts 配置中的一种方法。

第一步是在仓库的 workflows 目录中创建一个专门的工作流文件：

name: CI/CD
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
- name: Install dependencies
run: npm ci
- name: Run linters
run: |
npm run lint:js
npm run lint:css
- name: Run tests
run: npm run test
- name: Build
run: npm run build
- name: Deploy
if: github.ref == 'refs/heads/main'
run: |
# Add your deployment script here
# For example, using rsync to a remote server:
# rsync -avzc --delete ./build/ user@example.com:/path/to/wp-content/themes/your-theme/

部署步骤因主机而异。你可以使用 rsync、与 DeployHQ 或 Buddy 等服务集成，也可以使用简单的 cURL 集成。如果部署需要密码或密钥，则应将它们作为机密添加到 GitHub 仓库设置中。

该工作流在每次推送和拉取请求时都会运行 linters、测试和构建项目。最重要的是，它只在你向主分支推送变更时才进行部署。

创建自定义命令行界面（CLI）工具

如果你需要自定义工具，wp-scripts 可以提供帮助。例如，你可能想部署一个符合你的机构需求的自定义 CLI 工具。

在某些情况下，您的工具需要一些依赖项：

npm install @wordpress/scripts commander chalk

在这里，Commander 会解析命令行参数，并用 chalk 改进输出文本的可视化显示。

从这里开始，你就可以利用 wp-scripts 来编写工具代码了。以下是该文件的示例：

#!/usr/bin/env node
const { program } = require('commander');
const { spawn } = require('child_process');
const path = require('path');
const chalk = require('chalk');
const wpScripts = path.resolve(__dirname, './node_modules/.bin/wp-scripts');
const runWpScripts = (script, args) => {
console.log(chalk.blue(`Running wp-scripts ${script}...`));
const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });
result.on('exit', (code) => {
if (code !== 0) {
console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));
}
});
};
program
.version('1.0.0')
.description('Custom WordPress development CLI for Agency XYZ');
program
.command('build')
.description('Build the project')
.action(() => runWpScripts('build'));
program
.command('start')
.description('Start the development server')
.action(() => runWpScripts('start'));
program
.command('lint')
.description('Lint JavaScript and CSS files')
.action(() => {
runWpScripts('lint-js');
runWpScripts('lint-style');
});
program
.command('test')
.description('Run unit tests')
.action(() => runWpScripts('test-unit-js'));
program
.command('deploy')
.description('Deploy the project')
.action(() => {
console.log(chalk.green('Deploying project...'));
// Add your deployment logic here
// For example:
// spawn('rsync', ['-avz', 'build/', 'user@server:/path/to/wordpress/wp-content/themes/your-theme/']);
});
program.parse(process.argv);

在 package.json 文件中添加 bin 字段可让 CLI 工具成为可执行文件：

…
{
"name": "agency-wp-cli",
"version": "1.0.0",
"bin": {
"agency-wp": "./cli.js"
},
// ... other fields
}
…

要为本地安装链接 CLI，只需运行 npm link。现在，你可以在终端应用程序中测试 CLI 了：

agency-wp build
agency-wp lint
agency-wp deploy

您应该将该工具发布到私有的 npm 注册表中，这样其他团队成员就可以随意安装：

npm publish --registry=https://your-private-registry.com

需要时，只需运行 npm install --save-dev agency-wp-cli 即可安装工具。在这里，你可以在 package.json 中引用 CLI：

{
"scripts": {
"build": "agency-wp build",
"start": "agency-wp start",
"lint": "agency-wp lint",
"test": "agency-wp test",
"deploy": "agency-wp deploy"
}
}

创建和使用这样的工具可以确保您公司的每个人都使用相同的命令和流程。这可以减少不一致，并进一步简化 WordPress 开发工作流程。

性能优化

在管理多个高流量 WordPress 网站时，性能优化对您的交付至关重要。wp-scripts 可以帮助您实现多种高级技术。

高级代码拆分

例如，通过代码拆分，您可以将 JavaScript 捆绑程序拆分成更小的块，然后按需加载。这可以提高初始加载时间，尤其是大型应用程序。

首先，修改 webpack.config.js 文件以启用代码拆分：

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaultConfig,
entry: {
main: './src/index.js',
admin: './src/admin.js',
},
output: {
filename: '[name].js',
chunkFilename: '[name].[contenthash].js',
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
chunks: 'all',
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `vendor.${packageName.replace('@', '')}`;
},
},
},
},
},
};

在整个 JavaScript 代码中，您使用动态导入将其分割成小块：

// Instead of: import { heavyFunction } from './heavyModule';
button.addEventListener('click', () => {
import('./heavyModule').then(module => {
module.heavyFunction();
});
});

您还需要在 WordPress 文件中对每个分割进行排队：

function enqueue_split_scripts() {
$asset_file = include(get_template_directory() . '/build/index.asset.php');  
wp_enqueue_script('main', get_template_directory_uri() . '/build/main.js', $asset_file['dependencies'], $asset_file['version'], true);
wp_enqueue_script('admin', get_template_directory_uri() . '/build/admin.js', $asset_file['dependencies'], $asset_file['version'], true);
}
add_action('wp_enqueue_scripts', 'enqueue_split_scripts');

这样可以降低加载时间，而且实施起来也不会花费太多时间。

树形调整

在 JavaScript 中，‘tree shaking’是指如何删除未使用的代码。wp-scripts 和 webpack 都会在生产构建时进行树形调整，但你还可以进一步优化。应用比我们这里给出的更复杂，但无论如何，你都要确保使用 ES6 导入和导出语法：

// Good for tree shaking
export function usedFunction() { /* ... */ }
// Bad for tree shaking
module.exports = {
usedFunction: function() { /* ... */ },
};

接下来，指定那些有 ‘side effects’的文件…

{
"name": "your-package",
"sideEffects": ["*.css", "*.scss"]
}

…或标记为无副作用：

{
"name": "your-package",
"sideEffects": false
}

有些大型库和其他库一样，不支持树形晃动。在这种情况下，您应该使用特定的插件来完成这项工作：

npm install --save-dev babel-plugin-transform-imports

这也意味着您也应该更新您的 babel 配置文件，以实现最佳和无差错安装。

资产优化

wp-scripts 构建过程会帮你最小化 CSS 和 JavaScript 文件，你还可以进一步优化。例如，您可以安装特定的图片优化插件：

npm install --save-dev imagemin-webpack-plugin

将其添加到 webpack 配置文件后，只需在 functions.php 文件或主插件文件中添加正确的代码，即可使用资源提示：

function add_resource_hints( $urls, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$urls[] = 'https://fonts.googleapis.com';
$urls[] = 'https://fonts.gstatic.com';
}
return $urls;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

这样的任务显示了 wp-scripts 的灵活性，您可以根据机构或项目的需要对其进行定制。

分析捆绑大小

了解捆绑包的组成对于优化至关重要。有了 wp-scripts，你可以使用 --analyze 标志来轻松实现这一目标。

npm run build -- --analyze

第一步是在 package.json 文件中添加相关脚本：

{
"scripts": {
"analyze": "wp-scripts build --analyze"
}
}

运行 analyze 命令后，它会生成一份报告，显示捆绑包中每个模块的大小。这种简单的实现方式可以帮助你确定需要优化的地方。

实施关键CSS

网站的关键CSS是加载页面上部内容所需的最低限度。将 CSS 内嵌到页面中可以缩短页面的加载时间。

实现这一点需要使用 Critical CSS Webpack 插件：

npm install --save-dev critical-css-webpack-plugin

下一步工作是更新 webpack 配置文件，以引用该插件：

const CriticalCssPlugin = require('critical-css-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaultConfig,
plugins: [
...defaultConfig.plugins,
new CriticalCssPlugin({
base: 'dist/',
src: 'index.html',
target: 'styles/critical.css',
extract: true,
inline: true,
minify: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 900,
width: 1300,
},
],
}),
],
};

要使用它，您需要在 header.php 文件中添加一个片段：

<style>
<?php echo file_get_contents(get_template_directory() . '/build/styles/critical.css'); ?>
</style>

这主要是提取并内嵌关键 CSS，以加快初始呈现速度。它可为特定视口尺寸生成关键 CSS，从而缩短主题的加载时间。

总结

对于机构开发而言，wp-scripts 是一个强大的工具，可以显著提升主题和插件项目的工作流程。wp-scripts 提供标准化的构建流程、现代 JavaScript 支持以及集成的测试和衬垫工具，让您可以专注于创建高质量的 WordPress 项目，同时将一些最重要的任务自动化。

利用 wp-scripts 不仅能帮助您跟上现代开发实践。它还能让你站在 WordPress 开发的最前沿，随时应对你的公司所面临的挑战和机遇。

wp-scripts 能为您的公司开发项目提供所需的功能和范围吗？请在下面的评论区与我们分享您的想法！