如何配置您的开发环境以合并 wp-scripts

[Dimaeiya333]

使用wp-scripts有其自身的要求，但您很可能已经使用了这些工具。如果需要，请安装Node.js 和 npm以及本地 WordPress 开发环境。DevKinsta将是一个很好的解决方案，因为它在Docker上运行并且与 Kinsta 临时环境兼容。

DevKinsta 界面显示有关您的 WordPress 网站的信息。它包括站点类型、数 instagram 数据 据库类型、Web 服务器和 PHP 版本。界面顶部显示“Open Site”、“Sync”、“Database Manager”和“WP Admin”按钮。左侧显示网站的小预览。界面底部有一个带有“停止站点”按钮的“站点状态”部分。
DevKinsta的主界面。
如果您已经使用该包create-block来开发 WordPress Blocks 插件，则它会wp-scripts与其其他资产一起安装。从这里，您可以开始设置包开发项目。

使用 wp-scripts 设置新的 WordPress 项目
您所做的工作将位于WordPress 安装的wp-content目录中。具体的子目录将与您创建的项目类型相关：主题为wp-content/themes，插件为 wp-content/ plugins。

无论如何，您的项目文件夹应包含一系列文件和目录：

一个文件package.json。
构建目录。
src目录还包含index.js.
要创建文件package.json，请使用终端或命令行应用程序导航到项目目录。运行该命令npm init将引导您完成交互式配置过程，您的“入口点”应该是build/index.js：

带有深色背景的终端窗口，显示 WordPress 主题项目的 npm init 命令的输出。文本解释说，该实用程序将指导用户创建 package.json 文件，包括常见元素并建议合理的默认值。提供有关如何安装包并将其保存为依赖项的说明。终端显示初始配置详细信息，包括包名称、版本、描述和入口点。
部分执行 npm init 进程，显示入口点值。
wp-scripts然后作为开发依赖项安装：


您还应该看到一些自动生成的目录和文件：node_modules和package-lock.json.无论如何，现在您必须引用文件中的预定义脚本package.json：
}
您可能会经常返回此文件以在必要时添加更多脚本。例如：

…

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

了解 webpack 并将其与 wp-scripts 一起使用
要打包隐藏资源，wp-scripts请使用 webpack。您不需要配置它，但了解其功能可以帮助您wp-scripts更有效地利用它。 Webpack 在配置方面有很多职责：

帮助解决 JavaScript 模块之间的依赖关系。
您可以将现代 JavaScript 转换为浏览器兼容的代码。
它将帮助您处理和优化您的风格。
您将能够生成源映射以方便调试。
它将帮助您创建准备用于生产的缩小包。
您已经在wp-scripts.这对于大多数 WordPress 项目都很有效。然而，在某些情况下，您可能需要创建自定义配置。

机构的高级 webpack 配置
虽然默认的 webpack 配置对于大多数开发项目来说都是理想的，但有时您需要根据您的特定需求创建配置。例如，您可能会处理复杂的主题结构或独特的插件架构。这是webpack.config.js项目根目录中的文件派上用场的地方：

};
此设置允许多个入口点，这对于需要为 WordPress 管理或前端的不同部分使用单独脚本的主题或插件特别有用。这样，您可以扩展默认设置并保持wp-scripts.