如何设置开发环境以整合
Posted: Sat Dec 28, 2024 8:41 am
使用wp-scripts有其自己的要求，但您可能已经使用了这些工具。如果需要，请安装Node.js 和 npm以及本地 WordPress 开发环境。DevKinsta将是一个很好的解决方案，因为它在Docker上运行并支持 Kinsta 的暂存环境。
DevKinsta 界面显示 WordPress 网站的站点信息。它包括站点类型、数据库类型、Web 服务器和 PHP 版本。界面顶部显示“打开站点”、“同步”、“数据库管理器”和“WP 管理”按钮。左侧显示网站的一个小预览。界面底部有一个站点状态部分，其中有一个“停止站点”按钮。
DevKinsta 主界面。
如果您已经使用该create-block软件包开发 WordPress Block 插件，它将wp-scripts与其他资产一起安装。从这里，您可以开始设置软件包开发项目。
使用 wp-scripts 设置新的 WordPress 项目
您进行的工作将位于WordPress 安装的wp-content目录中。具体子目录 加拿大 WhatsApp 手机号码列表 将与您创建的项目类型相关：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为开发依赖项：
npm install @wordpress/scripts --save-dev
您还应该看到几个自动生成的目录和文件：node_modules和package-lock.json。无论如何，您现在需要在package.json文件中引用预定义的脚本：
您可能还需要在此处排队您的主题或插件资产，然后保存您的更改。
理解并使用 webpack 和 wp-scripts
对于底层资产的打包，wp-scripts使用 webpack。您不需要配置它，但了解它的作用可以帮助您wp-scripts更有效地利用它。Webpack 在设置时有很多职责：
它有助于解决 JavaScript 模块之间的依赖关系。
您可以将现代 JavaScript 转换为与浏览器兼容的代码。
它将帮助处理和优化您的风格。
您可以生成源映射以便更轻松地调试。
它可以帮助您创建可用于生产的、最小化的捆绑包。
您已经有一个默认的 webpack 配置wp-scripts。这适用于大多数 WordPress 项目。但在某些情况下，您可能需要创建自定义配置。
针对代理设置的高级 webpack 配置
虽然默认的 webpack 配置对于大多数开发项目来说都是理想的，但有时你需要根据特定需求创建配置。例如，你可能要处理复杂的主题结构或独特的插件架构。这时，webpack.config.js项目根目录中的文件就会派上用场：
此配置允许多个入口点，这对于需要为 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 文件进行 lint 处理。
npm run lint:pkg-json。这将验证您的package.json文件。
对于单元测试，您只需调用npm run test，它使用 Jest 来执行您的测试套件。
探索 wp-scripts 中的核心实用程序
基本的构建任务可能需要很长时间，并且典型的命令需要大量自动化。但是，wp-scripts提供了一套复杂的实用程序，可以满足您的 WordPress 开发的复杂需求：
高级编译。通过优化的配置，您可以转译现代 JavaScript（包括 ECMAScript 模块 (ESM) 和 Javascript XML (JSX)）并编译 Sass。
智能打包。您可以利用 webpack 的代码分割和“tree shake”来优化您的资产交付。
全面的 linting。您可以在 JavaScript、CSS 和package.json文件中强制执行编码标准。
集成测试。使用 Jest，您可以运行单元测试和覆盖率报告。
开发服务器。您可以利用热重载实现跨多个项目的快速开发。
无论您使用的是主题还是插件，您都可以扩展每个的默认功能，以利用更加定制的 WordPress 开发流程。
Agency hosting
处理 JSX 和现代 JavaScript
许多 WordPress 项目都使用现代 JavaScript 元素，例如React 组件、箭头函数、解构、async/await等。甚至核心代码库的某些方面（例如块编辑器）也使用现代 JavaScript 来构建其功能。
然而，浏览器本身并不理解这些高级语法，因此需要做更多的工作来转换和编译它们。
JSX可让您在 JavaScript 中编写类似 HTML 的代码，从而更轻松地描述界面和其他元素的外观。首先，这可以提高可读性和可维护性。您还可以访问强大的 React 组件来创建动态用户界面 (UI)。
wp-scripts使用Babel JavaScript 编译器将现代 JavaScript 和 JSX 转换为浏览器可以理解的代码。它处理所有复杂且必要的配置，让您专注于编写代码。
你可以通过src/index.js文件利用这一点。查看这个小例子，了解如何使用 JSX 和现代 JavaScript 实现wp-scripts
DevKinsta 界面显示 WordPress 网站的站点信息。它包括站点类型、数据库类型、Web 服务器和 PHP 版本。界面顶部显示“打开站点”、“同步”、“数据库管理器”和“WP 管理”按钮。左侧显示网站的一个小预览。界面底部有一个站点状态部分，其中有一个“停止站点”按钮。
DevKinsta 主界面。
如果您已经使用该create-block软件包开发 WordPress Block 插件，它将wp-scripts与其他资产一起安装。从这里，您可以开始设置软件包开发项目。
使用 wp-scripts 设置新的 WordPress 项目
您进行的工作将位于WordPress 安装的wp-content目录中。具体子目录 加拿大 WhatsApp 手机号码列表 将与您创建的项目类型相关：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为开发依赖项：
npm install @wordpress/scripts --save-dev
您还应该看到几个自动生成的目录和文件：node_modules和package-lock.json。无论如何，您现在需要在package.json文件中引用预定义的脚本：
您可能还需要在此处排队您的主题或插件资产，然后保存您的更改。
理解并使用 webpack 和 wp-scripts
对于底层资产的打包，wp-scripts使用 webpack。您不需要配置它，但了解它的作用可以帮助您wp-scripts更有效地利用它。Webpack 在设置时有很多职责：
它有助于解决 JavaScript 模块之间的依赖关系。
您可以将现代 JavaScript 转换为与浏览器兼容的代码。
它将帮助处理和优化您的风格。
您可以生成源映射以便更轻松地调试。
它可以帮助您创建可用于生产的、最小化的捆绑包。
您已经有一个默认的 webpack 配置wp-scripts。这适用于大多数 WordPress 项目。但在某些情况下，您可能需要创建自定义配置。
针对代理设置的高级 webpack 配置
虽然默认的 webpack 配置对于大多数开发项目来说都是理想的，但有时你需要根据特定需求创建配置。例如，你可能要处理复杂的主题结构或独特的插件架构。这时，webpack.config.js项目根目录中的文件就会派上用场：
此配置允许多个入口点，这对于需要为 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 文件进行 lint 处理。
npm run lint:pkg-json。这将验证您的package.json文件。
对于单元测试，您只需调用npm run test，它使用 Jest 来执行您的测试套件。
探索 wp-scripts 中的核心实用程序
基本的构建任务可能需要很长时间，并且典型的命令需要大量自动化。但是，wp-scripts提供了一套复杂的实用程序，可以满足您的 WordPress 开发的复杂需求：
高级编译。通过优化的配置，您可以转译现代 JavaScript（包括 ECMAScript 模块 (ESM) 和 Javascript XML (JSX)）并编译 Sass。
智能打包。您可以利用 webpack 的代码分割和“tree shake”来优化您的资产交付。
全面的 linting。您可以在 JavaScript、CSS 和package.json文件中强制执行编码标准。
集成测试。使用 Jest，您可以运行单元测试和覆盖率报告。
开发服务器。您可以利用热重载实现跨多个项目的快速开发。
无论您使用的是主题还是插件，您都可以扩展每个的默认功能，以利用更加定制的 WordPress 开发流程。
Agency hosting
处理 JSX 和现代 JavaScript
许多 WordPress 项目都使用现代 JavaScript 元素，例如React 组件、箭头函数、解构、async/await等。甚至核心代码库的某些方面（例如块编辑器）也使用现代 JavaScript 来构建其功能。
然而，浏览器本身并不理解这些高级语法，因此需要做更多的工作来转换和编译它们。
JSX可让您在 JavaScript 中编写类似 HTML 的代码，从而更轻松地描述界面和其他元素的外观。首先，这可以提高可读性和可维护性。您还可以访问强大的 React 组件来创建动态用户界面 (UI)。
wp-scripts使用Babel JavaScript 编译器将现代 JavaScript 和 JSX 转换为浏览器可以理解的代码。它处理所有复杂且必要的配置，让您专注于编写代码。
你可以通过src/index.js文件利用这一点。查看这个小例子，了解如何使用 JSX 和现代 JavaScript 实现wp-scripts