@wordpress/脚本

这是为WordPress开发定制的可重用脚本的集合。为了方便起见，此软件包中提供的每个工具都带有集成的推荐配置。

当无缝工作时，复杂的命令行界面有助于将项目工作变成更愉快的体验。然而，这是一种误导性的假设，即开发人员可以首先轻松地选择合适的工具，然后确保他们彼此配合，包括他们的所有扩展。此外，这还不够，因为开发人员需要自己保持所有配置和相关工具的最新状态。当他们支持多个共享相同设置的项目时，这个问题会倍增。

幸运的是，有一种模式可以简化维护人员的生活——可重用脚本。这个想法归结为将所有必要的配置和脚本移动到一个单独的工具依赖项。在大多数情况下，应该可以使用默认设置完成所有任务，但也允许进行一些自定义。有了这些，更新所有项目应该成为一项非常简单的任务。

该套装的灵感来自反应脚本和kcd脚本.

安装

您只需要安装一个npm模块：

npm install@wordpress/scripts--保存-dev

注释：此软件包要求Node.js版本具有长期支持状态（请检查活动LTS或维护LTS版本). 它与旧版本不兼容。

安装程序

这个包提供了一个命令行界面并公开了一个名为wp-脚本所以你可以直接用净现值–npm包运行器。但是，此模块设计为使用脚本中的部分package.json包项目的文件。这个全面的示例演示了其中包含的大部分功能。

例子：

{“脚本”：{“构建”：“wp-scripts构建”，“检查引擎”：“wp-scripts检查引擎”，“checklicenses”：“wp-scripts checklicences”，“format”：“wp-scripts格式”，“lint:css”：“wp-scripts lint-style”，“lint:js”：“wp-scripts lint-js”，“lint:md:docs”：“wp-scripts lint-md-docs”，“lint:pkg-json”：“wp-scripts lint-pkg-json”，“包更新”：“wp-scripts包更新”，“plugin-zip”：“wp-scripts plugin-zip”，“开始”：“wp脚本开始”，“测试：e2e”：“wp-scripts测试-e2e”，“test:unit”：“wp-scripts test-unit-js”}}

熟悉一下JavaScript构建设置教程用于设置开发环境以使用ESNext语法。它对如何使用建造和开始脚本。

自动block.json检测和源代码目录

使用时开始或建造命令，源代码目录（默认为./src型)并扫描其子目录中是否存在块.json文件夹。如果找到一个或多个，它们将被视为入口点，并将输出到建造目录。这允许创建使用单个构建过程的多个块。可以使用--webpack src目录标记和带有--输出通路标志。

更新到新版本

将现有项目更新为的新版本@wordpress/脚本，打开变更日志，查找您当前所在的版本（检查package.json包（位于项目的顶级目录中），并为较新版本应用迁移说明。

在大多数情况下@wordpress/脚本中的版本package.json包和运行npm安装在项目的根文件夹中应该足够了，但最好检查变更日志潜在的突破性变化。还有软件包-更新此包中包含的脚本旨在自动更新项目中的WordPress依赖项。

我们承诺尽量减少破坏性更改，以便您可以升级@wordpress/脚本尽可能无缝。

可用脚本

建造

根据提供的配置转换代码，使其可以投入生产并优化以获得最佳性能。

此脚本在生成单个生成后退出。对于更适合开发的增量构建，请参见开始脚本。

通过扫描中的所有脚本字段来检测项目的入口点块.json文件位于型钢混凝土目录。中的脚本字段块.json应将相对路径传递到块.json在同一文件夹中。

例子：

{“editorScript”：“file:index.js”，“script”：“file:script.js”，“viewScript”：“file:view.js”}

后备入口点为源代码/索引.js（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)如果没有块.json找到文件。在这种情况下，生成的输出将写入构建/index.js.

例子：

{“脚本”：{“构建”：“wp-scripts构建”，“build:custom”：“wp-scripts build-entry-one.js entry-two.js--output-path=自定义”，“build:copy php”：“wp脚本构建--webpack复制php”，“build:custom-directory”：“wp-scripts build--webpack-src-dir=custom-derectory”}}

以下是使用所提供的设置执行脚本的方式：

• npm运行生成–为生产构建代码。
• npm运行版本：自定义–使用两个入口点和一个自定义输出目录构建生产代码。自定义入口点的路径相对于项目根目录。
• npm运行版本：copy-php–构建用于生产和操作的代码，以从型钢混凝土目录及其子文件夹到输出目录。默认情况下，只有PHP文件列在提供检测到的字段块.json文件被复制。
• npm运行构建：自定义目录–使用自定义目录作为源代码目录。

此脚本自动使用优化的配置，但有时您可能需要指定一些自定义选项：

• --webpack-bundle-分析器–通过交互式可缩放树映射，可以可视化webpack输出文件的大小。
• --webpack-copy-php–允许从源目录复制所有PHP文件（默认为型钢混凝土)及其子文件夹到输出目录。
• --网络包-非外部–禁用脚本的资产生成，并忽略默认外部列表。
• --webpack-src-dir–允许自定义源代码目录。默认值为型钢混凝土.
• --输出通路–允许自定义输出目录。默认值为建造.

对block.json的实验支持查看脚本模块字段可通过
--实验模块选项。启用此选项后，脚本和模块字段都将
已编译。这个查看脚本模块字段类似于查看脚本字段，但将编译模块
并应使用模块API在WordPress中注册。

高级信息

此脚本使用网络包在幕后。它将在包的顶级目录中查找webpack配置，如果找到则使用它。如果没有找到，它将使用由提供的默认配置@wordpress/脚本包装。在中了解更多信息高级使用部分。

检查发动机

检查当前节点,净现值（或纱线)版本与给定的匹配语义版本范围。如果不满足给定的版本，则会打印有关安装所需版本的信息，程序退出并返回错误代码。

例子：

{“脚本”：{“检查引擎”：“wp-scripts检查引擎”}}

以下是使用所提供的设置执行脚本的方式：

• npm运行检查引擎–检查安装的版本节点和净现值.

高级信息

它使用检查节点-版本在提供推荐配置的幕后。默认要求设置为与中所列相同的Node.js和npm版本安装部分。您可以指定自己的范围，如中所述检查节点-版本文档。在中了解更多信息高级使用部分。

检查许可证

验证项目的所有依赖项是否与项目自己的许可证兼容。

例子：

{“脚本”：{“checklicenses”：“wp-scripts checklicences--prod--gpl2--ignore=abab”}}

旗帜:

• --触头（或--生产)：存在时，仅验证依赖关系而不是devDependencies（开发依赖项）
• --开发（或--发展)：存在时，仅验证devDependencies（开发依赖项）而不是依赖关系
• --gpl2：根据验证GPLv2许可证兼容性
• --忽略=a、b、c：要在验证时忽略的一组以逗号分隔的包名称。这主要用于依赖关系许可证字段格式不正确。假设任何忽略包参数将由项目所有者手动检查兼容性。

格式

通过以一致的方式格式化源代码，它有助于强制执行文件的编码风格准则（默认情况下为JavaScript、JSON、TypeScript和YAML启用）。

例子：

{“脚本”：{“format”：“wp脚本格式”，“format:src”：“wp-scripts format./src”}}

以下是使用所提供的设置执行脚本的方式：

• npm运行格式–格式化整个项目目录中的文件。
• npm运行格式：src–格式化项目中的文件型钢混凝土子文件夹的目录。

当您运行类似于npm运行格式：src例如，您可以提供文件、目录或全球语法或它们的任何组合。

默认情况下，位于建造,节点_模块、和小贩文件夹被忽略。您可以通过将忽略的文件和目录添加到.prettierignore公司项目中的文件。

皮棉-js

帮助强制执行JavaScript和TypeScript文件的编码样式准则。

例子：

{“脚本”：{“lint:js”：“wp-scripts lint-js”，“lint:js:src”：“wp-scripts lint-js./src”}}

以下是使用所提供的设置执行脚本的方式：

• npm运行lint:js–在整个项目的目录中插入JavaScript和TypeScript文件。
• npm运行lint:js:src–在项目的型钢混凝土子文件夹的目录。

当您运行类似于npm运行lint:js:src例如，您可以提供文件、目录或全球语法或它们的任何组合。请参见更多示例.

默认情况下，位于建造,节点_模块、和小贩文件夹被忽略。

高级信息

它使用埃斯林使用中定义的一组建议规则@wordpress/eslint插件npm包。您可以使用自己的规则覆盖默认规则，如中所述eslint文档。在中了解更多信息高级使用部分。

皮棉-pkg-json

帮助您执行标准package.json包文件夹。

例子：

{“脚本”：{“lint:pkg-json”：“wp-scripts lint-pkg-json”，“lint:pkg-json:src”：“wp-scripts lint-pkg-json。/src”}}

以下是使用所示设置执行这些脚本的方式：

• npm运行lint:pkg-json–棉绒package.json包文件。
• npm运行lint:pkg-json:src–过梁package.json包项目中的文件型钢混凝土子文件夹的目录。

当您运行类似于npm运行lint:pkg-json:src上面的示例中，您还可以提供一个或多个目录进行扫描。请参见更多示例.

默认情况下，位于建造,节点_模块、和小贩文件夹被忽略。

高级信息

它使用npm-package-json线头使用中定义的一组建议规则@wordpress/npm-package-json-lint-confignpm包。您可以使用自己的规则覆盖默认规则，如中所述npm-package-json-lint维基。在中了解更多信息高级使用部分。

lint-md-docs文件

使用markdownint对降价文件的标记进行消减，以强制执行标准。

例子：

{“脚本”：{“lint:md:docs”：“wp-scripts lint-md-docs”}}

以下是使用所提供的设置执行脚本的方式：

• npm运行lint:md:docs–整个项目目录中的lints标记文件。

默认情况下，位于建造,节点_模块、和小贩文件夹被忽略。

高级信息

它使用标记下划线使用.markdownint.json配置。此配置调整了linting规则以匹配WordPress标准，您可以使用自己的配置覆盖，请参阅markdownlint-cli标记用于命令行参数。

短绒风格

有助于为样式文件强制执行编码样式准则。

例子：

{“脚本”：{“lint:style”：“wp-scripts lint-style”，“lint:css:src”：“wp-scripts lint-style'src/**/*.css'”}}

以下是使用所提供的设置执行脚本的方式：

• npm运行线头：样式–在整个项目的目录中插入CSS、PCSS和SCSS文件。
• npm运行lint:css:src–在项目的型钢混凝土子文件夹的目录。

当您运行类似于npm运行lint:css:src上面的示例中，请确保在文件globs周围包含引号。这确保您可以使用环球（globby）（就像**全球之星）不管你的外壳。请参见更多示例.

默认情况下，位于建造,节点_模块、和小贩文件夹被忽略。

高级信息

它使用样式绒布使用@wordpress/stylelint-config根据的配置WordPress CSS编码标准。您可以使用自己的规则覆盖它们，如中所述stylelint用户指南。在中了解更多信息高级使用部分。

软件包-更新

将项目中使用的WordPress包更新为最新版本。

例子：

{“脚本”：{“包更新”：“wp-scripts包更新”，“postpackages-update”：“npm运行构建”}}

此脚本提供以下自定义选项：

• --分配标签–允许在更新npm包时指定自定义dist-tag。默认为最新的。这在使用时特别有用@wordpress/dependency-extraction-webpack-plugin语言。它允许在给定WordPress主要版本用于本地测试等的版本上安装npm依赖项。示例：wp-scripts包更新--dist-tag=wp-6.0.

高级信息

该命令检测名称以开头的项目依赖项@文字出版社/通过扫描package.json包文件。默认情况下，它执行npm安装@wordpress/package1@最新@wordpress/package2@最新 ... --节约将包版本更改为最新版本。您可以选择不同于最新的通过使用--分配标签选项。

插件-zip

为WordPress插件创建zip文件。

例子：

{“脚本”：{“plugin-zip”：“wp-scripts plugin-zip”}}

默认情况下，它使用插件手册最佳实践以发现文件。

高级信息

如果插件作者想要自定义zip文件中包含的文件，他们可以提供文件夹中的字段package.json包文件，如npm-文件包列表包，示例：

{“文件”：[“目录”]}

它重复使用与npm包命令创建npm包tarball。

开始

根据提供的配置转换代码，以便为开发做好准备。如果您更改代码，脚本将自动重新生成，并且您将在控制台中看到生成错误。

对于更适合生产的单次构建，请参阅建造脚本。

通过扫描中的所有脚本字段来检测项目的入口点块.json文件位于型钢混凝土目录。中的脚本字段块.json应将相对路径传递给块.json在同一文件夹中。

例子：

{“editorScript”：“file:index.js”，“script”：“file:script.js”，“viewScript”：“file:view.js”}

后备入口点为源代码/索引.js（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)如果没有块.json找到文件。在这种情况下，生成的输出将写入构建/index.js.

例子：

{“脚本”：{“start”：“wp-scripts start”，“start:hot”：“wp-scripts start--hot”，“start:custom”：“wp-scripts start entry-one.js entry-two.js--output-path=自定义”，“start:copy-php”：“wp-scripts start--webpack-copy-php”，“start:custom-directory”：“wp-scripts start--webpack-src-dir=custom-derectory”}}

以下是使用所提供的设置执行脚本的方式：

• npm启动–开始构建以供开发。
• npm运行启动：热–使用“快速刷新”启动构建以供开发。如果您对文件进行更改，页面将自动重新加载。
• npm运行启动：自定义–启动用于开发的构建，其中包含两个入口点和一个自定义输出目录。自定义入口点的路径相对于项目根目录。
• npm运行开始：copy-php–启动构建以供开发，并选择从型钢混凝土目录及其子文件夹到输出目录。默认情况下，只有PHP文件列在提供检测到的字段块.json文件被复制。
• npm运行开始：自定义目录–使用自定义目录作为源代码目录。

此脚本自动使用优化的配置，但有时您可能需要指定一些自定义选项：

• --热的，热的–启用“快速刷新”。如果您更改代码，页面将自动重新加载。目前，它要求WordPress具有脚本_取消标志已启用，并且古腾堡插件已安装。
• --不看比赛–在不启动观察程序的情况下启动构建以进行开发。
• --webpack束分析器–通过交互式可缩放树映射，可以可视化webpack输出文件的大小。
• --webpack-copy-php–允许从源目录复制所有PHP文件（默认为型钢混凝土)及其子文件夹到输出目录。
• --webpack-devtool–控制如何生成源映射。请参阅上的选项https://webpack.js.org/configuration/devtool/#devtool。
• --网络包-非外部–禁用脚本的资产生成，并忽略默认外部列表。
• --webpack-src-dir–允许自定义源代码目录。默认值为型钢混凝土.
• --输出通路–允许自定义输出目录。默认值为建造.

对block.json的实验性支持查看脚本模块字段可通过
--实验模块选项。启用此选项后，脚本和模块字段都将
已编译。这个查看脚本模块字段类似于查看脚本字段，但将编译模块
并且应该使用模块API在WordPress中注册。

高级信息

此脚本使用网络包在幕后。它将在包的顶级目录中查找webpack配置，如果找到则使用它。如果没有找到，它将使用由提供的默认配置@wordpress/脚本包装。在中了解更多信息高级使用部分。

试验-e2e

启动端到端（E2E）测试运行程序。编写测试可以使用Jest API（杰斯特API）与木偶师API:

杰斯特是一个令人愉快的JavaScript测试框架，专注于简单性。

木偶演员是一个节点库，它提供了一个高级API来控制Chrome或ChromiumDevTools协议.木偶赛跑无头的默认情况下，但可以配置为运行完整（非headless）Chrome或Chromium。

例子：

{“脚本”：{“测试：e2e”：“wp-scripts测试-e2e”，“test:e2e:help”：“wp-scripts test-e2e--help”，“test:e2e:debug”：“wp-scripts--inspect-brk test-e2e--puppeter-devtools”}}

以下是使用所示设置执行这些脚本的方式：

• npm运行测试：e2e–运行所有e2e测试。
• npm运行测试：e2e:help–打印所有可用选项以配置e2e测试运行器。
• npm运行测试：e2e---puppeter-interactive–以交互方式运行所有e2e测试。
• npm运行测试：e2e FILE_NAME--puppeter-interactive–以交互方式运行一个测试文件。
• npm运行测试：e2e:watch--puppeter-interactive–以交互方式运行所有测试并监视更改。
• npm运行测试：e2e：调试–以交互方式运行所有测试并启用调试测试.

Jest将查找具有以下任何流行命名约定的测试文件：

• 包含的文件.js文件（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)任何深度的后缀规范文件夹。
• 包含的文件.规范.js（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)后缀。

此脚本会自动检测最佳配置以启动Puppeter，但有时可能需要指定自定义选项：

• 您可以添加jest-puppeteer.config.js或使用定义自定义路径JEST_puppeter_CONFIG环境变量。检查戏谑木偶演员了解更多详细信息。

我们使用–运行InBandJest CLI选项，以避免由于测试共享同一个WordPress实例而导致的测试之间的冲突。

失败的测试工件

当测试失败时，将截取页面的屏幕快照和HTML快照，并将其存储在工件/目录。这些快照可能有助于在开发期间或在CI环境中运行测试时调试失败的测试。

这个工件/可以通过设置WP_航路_路径环境变量设置为项目根目录中所需目录的相对路径。例如：更改默认目录人工制品/到我的/自定义/工件，您可以使用WP_ARTIFACTS_PATH=my/custom/ARTIFACTS npm运行测试：e2e.

高级信息

它使用杰斯特在幕后，您可以使用它的所有功能CLI选项。您还可以运行./node_modules/.bin/wp-scripts测试：e2e--帮助或npm运行测试：e2e：帮助（如上所述）以查看所有可用选项。在中了解更多信息高级使用部分。

如果您想提供自己的Jest配置，可以这样做。

• 该命令接收--配置参数。例子：wp-scripts test-e2e--配置my-jest-config.js.
• 有一个名为jest-e2e.config.js,笑话-e2e.config.json,jest.config.js，或杰斯特·config.json在包的顶级目录中（与package.json包).
• 一笑话对象可以在package.json包带有测试配置的文件。

测试单元-js

别名:测试单元笑话

启动单元测试运行程序。编写测试可以使用Jest API（杰斯特API）.

例子：

{“脚本”：{“test:unit”：“wp-scripts test-unit-js”，“test:unit:help”：“wp-scripts test-unit-js--help”，“test:unit:watch”：“wp-scripts test-unit-js--watch“，“test:unit:debug”：“wp-scripts--inspect-brk test-unit-js--runInBand--no-cache”}}

以下是使用所示设置执行这些脚本的方式：

• npm运行测试：单元–运行所有单元测试。
• npm运行测试：单元：帮助–打印所有可用选项以配置单元测试运行器。
• npm运行测试：单元：监视–在监视模式下运行所有单元测试。
• npm运行测试：单元：调试–在中运行所有单元测试调试模式.

Jest将查找具有以下任何流行命名约定的测试文件：

• 包含的文件.js文件（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)后缀位于__测试__文件夹。
• 包含的文件.js文件（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)后缀直接位于测试文件夹。
• 包含的文件.test.js（测试.js）（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)后缀。

高级信息

它使用杰斯特在幕后，您可以使用它的所有功能CLI选项。您还可以运行./node_modules/.bin/wp-scripts测试：单元--帮助或npm运行测试：单元：帮助（如上所述）查看所有可用选项。默认情况下，它使用中定义的一组建议选项@wordpress/jest-preset-defaultnpm包。您可以使用自己的选项覆盖它们，如中所述Jest文档。在中了解更多信息高级使用部分。

如果您想提供自己的Jest配置，可以这样做。

• 该命令接收--配置参数。例子：wp-scripts测试单元--配置my-jest-config.js.
• 有一个名为jest-unit.config.js,jest-unit.config.json公司,jest.config.js，或杰斯特·config.json在包的顶级目录中（与package.json包).
• 一笑话对象可以在package.json包带有测试配置的文件。

测试塑性

启动剧作家端到端（E2E）测试运行程序。与Puppeter类似，它提供了一个高级API来控制无头浏览器。

请参阅入门指南学习如何编写测试。

例子：

{“脚本”：{“测试：剧作家”：“wp-scripts test-playwright”，“test:playwriter:help”：“wp-scripts test-playwright--help”，“test:playwriter:debug”：“wp-scripts test-playwright--debug“}}

以下是使用所提供的设置执行这些脚本的方式：

• npm运行测试：剧作家–运行所有测试。
• npm运行测试：剧作家：帮助–打印所有可用选项以配置测试运行程序。
• npm运行测试：编剧：调试–与剧作家检查员交互运行所有测试。
• npm运行测试：剧作家FILE_NAME–运行特定的测试文件。
• npm运行测试：剧作家--观看–使用监视模式和增强的调试以交互方式运行所有测试。

默认情况下，Playwright使用.测试或.规格项目根级别中的后缀/规格文件夹，例如/规范/登录屏幕.wrong-credentials.spec.ts.

此脚本会自动检测最佳配置以启动Playwright，但有时可能需要指定自定义选项。
为此，可以添加一个名为编剧.config.ts或编剧.config.js在包的顶级目录中（与package.json包).

失败的测试工件

当测试失败时，将截取页面的快照并存储在工件/目录。这些快照可能有助于在开发期间或在CI环境中运行测试时调试失败的测试。

这个人工制品/可以通过设置WP_航路_路径环境变量设置为项目根目录中所需目录的相对路径。例如：更改默认目录工件/到我的/自定义/工件，您可以使用WP_ARTIFACTS_PATH=my/custom/ARTIFACTS npm运行测试：剧作家.

高级信息

你可以使用所有剧作家的CLI选项。您还可以运行./node_modules/.bin/wp-scripts test-playright--帮助或npm运行测试：剧作家：帮助（如上所述）以查看所有可用选项。在中了解更多信息高级使用部分。

传递Node.js选项

wp-脚本支持的完整数组Node.js CLI选项。可以在wp-脚本命令和脚本名称之前。

wp脚本[NODE_OPTIONS]脚本

调试测试

传递Node.js选项的一个常见用法是调试测试。

测试可以由任何检查员客户端支持Chrome DevTools协议.

按照说明使用您喜爱的受支持浏览器或IDE调试Node.js。当说明书上说要使用时节点--检查script.js或节点--inspect-brk script.js，只需使用wp-scripts—检查脚本或wp-scripts—检查标记脚本而不是。

下面使用谷歌浏览器和Visual Studio代码作为示例。

在Google Chrome中调试

地点调试器；任何测试和运行中的语句wp-scripts--inspect-brk test-unit-js--runInBand--无缓存（或npm运行测试：单元：调试从上方）。

然后打开关于：检查在Google Chrome中选择检查在您的流程中。

将在脚本的第一行设置一个断点（这样做是为了让您有时间打开开发工具，并防止Jest在您有时间之前执行）。单击开发工具右上角面板中的继续按钮以继续执行。当Jest执行包含调试器语句的测试时，执行将暂停，您可以检查当前范围和调用堆栈。

在Visual Studio代码中调试

自起，Visual Studio代码支持即时调试npm脚本版本1.23和可用于调试Jest单元测试。

确保wp-scripts--inspect-brk test-unit-js--runInBand--无缓存另存为测试：单元：调试在您的package.json包文件以在Visual Studio代码中运行测试。

调试时，通过单击编辑器左边空白处的行号，在测试中设置断点。

然后在资源管理器中打开npm脚本或运行资源管理器：关注NPM脚本视图在命令面板中查看npm脚本。要启动测试，请单击旁边的调试图标测试：单元：调试.

测试将开始运行，执行将暂停在选定的行上，以便您可以在编辑器中检查当前范围和调用堆栈。

请参见在Visual Studio代码中调试有关使用Visual Studio代码调试器的更多详细信息。

调试e2e测试

由于e2e测试都在节点上下文中运行和（通常是无头的）浏览器上下文，并不是所有代码行都可以在inspector客户端中设置断点，只有在inspector客户端中调试节点上下文。

在节点上下文中执行的代码包括所有测试文件不包括中的代码页面.评估功能。这个页面.评估函数和应用程序代码的其余部分在浏览器上下文中执行。

可以使用上述说明正常调试测试代码（节点上下文）。

要同时调试浏览器上下文，请运行wp脚本--检查brk测试-e2e--木偶师开发工具. The--木偶人-电动工具选项（或PUPPETEER_DEVTOOLS=“true”与一起使用时的环境变量PUPPETEER_HEADLESS=“假”)将禁用headless模式，并在devtools已打开的情况下启动浏览器。然后可以使用这些开发工具在浏览器上下文中设置断点。

有关e2e调试的更多提示，请查看Puppeteer调试文档.

高级使用

通常，此包应与一组推荐的配置文件一起使用。虽然可以覆盖提供的每个配置文件，但如果您必须这样做，这意味着您的用例比预期的要复杂得多。如果发生这种情况，最好避免使用整个抽象层，并在设置项目时完全控制所使用的工具。

使用生成脚本

这个建造和开始命令使用网络包在幕后。webpack是一个帮助您将代码转换为其他内容的工具。例如：它可以获取在ESNext中编写的代码，并输出与ES5兼容的代码，这些代码被缩小以用于生产。

默认webpack配置

@wordpress/脚本捆绑了WordPress编辑器用作基础的默认webpack配置。这些是默认值：

• 条目：通过扫描中的所有脚本字段来检测项目的入口点块.json文件位于型钢混凝土目录。后备入口点为源代码/索引.js（其他支持的扩展：.jsx公司,.ts格式、和.tsx文件)如果没有块.json找到文件。
• 输出:build/[名称].js，例如：构建/index.js，或构建/my-block/index.js.
• 装载机:
  • babel装载机允许使用Babel和webpack传输JavaScript和TypeScript文件。
  • @svgr/webpack和url加载程序可以用JavaScript代码处理SVG文件。
  • css装载机与…相连后ss-loader和sass-loader装载机让webpack处理JavaScript文件中引用的CSS、SASS或SCSS文件。
• 插件（除其他外）：
  • 复制Web包插件复制所有块.json在中发现的文件型钢混凝土目录到构建目录。
  • MiniCssExtract插件将CSS提取到单独的文件中。它为每个JavaScript入口点创建一个包含CSS的CSS文件。
  • @wordpress/dependency-extraction-webpack-plugin语言与默认配置一起使用，以确保WordPress提供的脚本不包含在构建的捆绑包中。

使用CSS

例子：

//索引scss$车身颜色：红色；.wp-块-my-块{颜色：$body-color；}

/*样式.css*/.wp-块-my-块{背景色：黑色；}

//索引.js导入”/index.pcss’；导入”/index.scss’；导入”/style.css；

使用默认命令运行生成时wp-scripts生成（也适用于开始)除了JavaScript文件索引.js在中生成建造文件夹中，您应该会看到另外两个文件：

1. 索引.css–所有导入的CSS文件都绑定到一个以入口点命名的块中，默认为索引.js，因此创建的文件变为索引.css。这仅适用于编辑器中使用的样式。
2. 样式index.css–已导入样式表文件（适用于PCSS、SASS和SCSS扩展名）捆绑在一起样式index.css用于前端和编辑器的文件。

您还可以有多个入口点，如脚本文档中所述：

wp-scripts start entry-one.js entry-two.js--output-path=自定义

如果这样做，则生成的CSS文件将跟随入口点的名称：入门级.css和入口two.css.

避免使用风格关键字，这可能会中断构建过程。

您还可以通过前缀绑定CSS模块.模块延伸，例如。样式.module.scss。否则，这些文件将像其他文件一样处理样式.scss。它们也将被提取到样式index.css.

使用字体和图像

可以引用字体(woff（沃尔夫）,woff2（颤抖2）,光电转换,土耳其信托基金和场外交易基金)和图像(骨形成蛋白,png格式,jpg格式,jpeg格式,图和韦布)由webpack控制的CSS文件，如前一节所述。

例子：

/*样式.css*/@字体-表面{font-family:吉尔伯特；src:url（../assets/gilbert-color.otf）；}.wp-块-my-块{背景颜色：url（../assets/block-background.png）；font-family:吉尔伯特；}

使用SVG

例子：

从'导入starUrl，{ReactComponent作为Star}/star.svg'；常量应用程序=（）=>(<div><img src={starUrl}alt=“star”/><明星/></div>);

提供您自己的webpack配置

如果您想提供自己的webpack配置，您可以这样做建造和开始在以下情况下，命令将使用您提供的文件：

• 该命令接收--配置参数。例子：wp-scripts构建--配置my-own-webpack-config.js.
• 有一个名为webpack.config.js或webpack.config.babel.js在项目的顶级目录中（与package.json包).

扩展webpack配置

要扩展所提供的webpack配置，或替换所提供的webpack配置中的子部分，您可以提供自己的webpack.config.js文件，要求提供的webpack.config.js文件，并使用传播操作人员导入全部或部分提供的配置。

在下面的示例中webpack.config.js文件被添加到根文件夹中，扩展了提供的webpack配置，以包含自定义逻辑来解析模块的源代码，并使用以下命令将其转换为JavaScript对象汤姆。将toml或其他非JSON文件导入为JSON可能很有用，无需特定的加载程序：

const toml=要求（'toml'）；const defaultConfig=require（'@wordpress/scripts/config/webpack.config'）；模块导出={…默认配置，模块：{…defaultConfig.module，规则：[…defaultConfig.module.rules，{测试：/.toml/，类型：'json'，分析器：{parse:toml.parse，},},],},};

如果您采用这种方法，请注意：

• 你应该继续使用wp-脚本命令(开始和建造). 不要使用网络包直接。
• 此软件包的未来版本可能会更改我们捆绑的webpack和Babel插件、默认配置等。如果需要这些更改，它们将在程序包的CHANGELOG，因此请确保在升级之前阅读它。

参与此包

这是古腾堡项目的一部分。该项目被组织为单回购项目。它由多个独立的软件包组成，每个包都有特定的用途。此monorepo中的包发布到净现值并由使用WordPress（文字出版社）以及其他软件项目。

要了解更多关于对这个包或古腾堡整体贡献的信息，请阅读该项目的主要内容贡献者指南.