如何在 wordpress 插件中正确 npm init/install/run build？

Question

这可能是一个愚蠢的问题，但我觉得我正在尝试编辑我从 github 存储库下载的 wordpress 插件：https://github.com/WordPress/gutenberg-examples。

现在，我正在学习 https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/ 的块教程。

所以我做了什么：

1. 在 zip 文件夹中下载预构建的插件
2. 将其上传到我在 docker (https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/) 中创建的 wordpress 站点
3. 打开 zip 文件夹并将其移动到我的插件目录
4. 例如，打开gutenberg-examples 文件夹中的“01-basic-esnext”文件夹并在block.build.js 中进行编辑。我所做的更改将显示在我创建的 wordpress 帖子中的块编辑器中。

然而，让我感到困惑的是“开发”部分中提到的 npm 内容。

<块引用>

对于包含 esnext 示例的每个示例，以下内容 构建插件需要命令：

安装节点包

npm install

构建插件的生产版本

npm run build

要搭建开发版，改成本地 您正在处理的块的目录，然后运行 ​​npm start 来观看 进行更改并在您开发时自动重建。

cd 01-basic-esnext/
npm start

在此之前，“开发”部分已经提到在gutenberg-examples 文件夹中为插件构建一个docker/wordpress 环境。

然而，我设置我的东西的方式是不同的。我已经在我的 wordpress 文件夹中运行了一个 docker，就像我在 https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/ 中遵循的那样，并且这个插件已经在我的插件目录中。我可以轻松地在 Visual Studio 代码中编辑文件，并在我的本地 wordpress 站点中查看更改。

那么我应该做些什么来安装 npm 的东西还是不理会它？

Answer 1

npm 用于这些 WordPress 插件，因为示例的 -esnext 版本是从 Javascript 模块构建的。构建过程在 npm 和 nodejs 上运行。这意味着，如果您处理 -esnext 代码，那么您就生活在一个混合世界中——您有 php 和 apache 运行您的开发 Web 服务器，您有 nodejs 和 npm 处理您的构建。

WordPress 团队精心设置了 docker 设置以支持编辑/运行过程。因此，如果您使用自己的 docker 设置，您将无法获得他们的好处。

完成开发工作后，您可以使用 npm run build 构建一个 .zip 文件，然后您可以使用“添加插件”页面顶部的“上传插件”按钮将其安装在您自己的 WordPress 实例中。< /p>

毫无疑问，代码就是诗。但开发环境不是。