webpack和WordPress包如何交互

对于您的用户来说，使用块使前端的一切看起来都很简单。但是在幕后，如果你更好地理解和使用构建过程，将React和JSX转换为任何浏览器都可以阅读的普通JavaScript，你的生活就会变得更加轻松。

在前端开发中，转发器的概念并不新鲜。（这是一个将源代码从一种语言转换为另一种语言的程序。）你可能听说过SASS和CoffeeScript；他们的输出必须经过一个转发器，浏览器才能呈现它。

我们可以使用转发器来减轻单调重复的任务，比如浏览器前缀。类似插件巴别塔和发布CSS让我们专注于我们的代码及其功能，插件添加前缀以及我们的代码需要在每个浏览器中工作的任何其他内容。 

除了输送器，还有打包机，而且有很多-管理构建过程。工具，如咕噜声和鲍尔他们是第一批，现在已经快十岁了。在大多数情况下，网络已经转向更现代的工具，比如网络包,维特等等。

WordPress使用webpack

WordPress的构建过程使用webpack。你会在@wordpress/脚本包，它在来自@wordpress/创建块包裹。

一个有趣的事实：这正是古腾堡项目用来构建古腾堡插件的包！

这个包的目的是为您配置webpack，这样您就可以开始您的项目了。因为自己配置webpack可能非常困难。

“不存在”的导入

如果您具有JavaScript背景，那么您可能以前使用过包。首先，使用安装包npm安装，然后从这些包中导入项以在项目中使用。 

您还将熟悉从包导入项目如何影响捆绑包的大小（webpack输出的JavaScript文件）。通常情况下，导入的越多，文件就越大，您可以使用以下技术来解决这个问题代码拆分和树木摇晃.

使用WordPress软件包时，您可能会注意到两件事：

• 您永远不会使用安装包npm安装. 
• 无论您从中导入多少项@文字出版社/*包的大小变化不大。

WordPress是否找到了一种使用JavaScript的方法，这种方法不需要导入，也不会增加捆绑包的大小不管你进口多少东西？

简短的回答是：是的。但只适用于WordPress附带的软件包。因为WordPress会自动排队并将这些包添加到全局工作压力对象。

因为这些包已经可用，所以使用这些包而不是用自定义脚本重新处理它们更有意义，而这正是幕后发生的事情。

例如，此代码段生成一个非常简单的Button组件，该组件从@wordpress/组件包裹。

从“@wordpress/components”导入{Button}；const我的组件=（）=>{return<Button>{__（'点击我！'）}</Button>；}导出默认MyComponent；

如果你看一下webpack将其转换到的文件，你会看到一些行看起来像这样。这是一个webpack，它将一些路径导出到我们在上使用的项目包工作压力全球的

/***/“@wordpress/组件”：/*!************************************!*\ !*** 外部[“wp”，“components”]***！ \************************************//***/（（模块）=>{module.exports=窗口[“wp”][“组件”]；/***/ }),/***/“@wordpress/element”：/*!*********************************!*\ !*** 外部[“wp”，“element”]***！ \*********************************//***/（（模块）=>{module.exports=窗口[“wp”][“element”]；

然后，在文件的后面，我们有了这个。它非常简洁，但这是一个webpack，它创建了引用上面定义的导出的变量。这些变量包含该包的所有内容。

var_wordpress_element__WEBPACK_IMPORTED_MODULE_0__=__WEBPACK_require__（/*！@wordpress/element*/“@wordpress/element”）；var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__default=/*#__PURE__*/__WEBPACK_require__.n；var _wordpress_components_WEBPACK_IMPORTED_MODULE_1__=__WEBPACK_require__（/*！@wordpress/components*/“@wordpress/components”）；var _wordpress_components_WEBPACK_IMPORTED_MODULE_1___default=/*#__PURE__*/__WEBPACK_require__.n；

最后，实际组件引用这些变量来检索所需的项。

const我的组件=（）=>{return（0，_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement）（_wordpress _components_WEBPACK_IMPORTEME_MODULE_1__.Button，null，“单击我！”）；};const__WEBPACK_DEFAULT_EXPORT__=（我的组件）；

这里有很多事情要做，所以如果你在这一点上不知所措，不要担心。您实际上不需要阅读（或理解）此文件。

如果您简化代码以用实际路径替换变量，它看起来像这样。而且更容易看到发生了什么！

const我的组件=（）=>{return（0，wp.element.createElement）（wp.components.Button，null，“单击我！”）；};const__WEBPACK_DEFAULT_EXPORT__=（我的组件）；

如您所见，您的代码已经更改：它看起来工作压力全局，而不是导入的包。

所以最大的问题是：Webpack是如何做到这一点的？

依赖项提取WebPackPlugin

作为webpack配置的一部分，您可以在@wordpress/脚本包，有一个自定义webpack插件调用了依赖项提取WebPackPlugin，它有两个非常重要的作用：

• 转换导入
• 自动化依赖关系管理

作业一：转换导入

它的第一项工作是检测以wordpress（和其他一些)并让他们访问工作压力而是全局的。

从本质上讲，它转换了这段代码

从“@wordpress/components”导入{Button}；

其中：

const{Button}=wp.components；

工作二：自动化依赖关系管理

在WordPress中排队脚本时，通常需要定义依赖项数组这将在脚本之前加载。

但当你在这篇文章中使用webpack工作流时，这就是依赖项提取WebPackPlugin.

它将生成一个名为索引资产.php它列出了它刚从import语句转换的依赖项。然后，它将根据上次生成文件的时间对每个文件进行版本控制。

<?php返回数组（“dependencies”=>数组（“wp-components”，“wp-element”），“version”=>“1d75a9e186898f1d6300”）；

如果您正在构建块，则块注册过程会自动加载此文件。但是，如果您想在代码中使用它，您可以执行以下操作

add_action（'排队_块_编辑器_资产'，'排队_文件'）；函数enqueue_my_file（）{//找到路径。$dependencies_file_path=插件目录路径（__file_）。'build/index.asset.php'；//如果文件存在，请将其排队。if（file_exists（$dependencies_file_path））{$dependencies=需要$dependaencies_file_path；wp_排队_脚本(“我的脚本”，插件dir_url（__FILE_）。'build/index.js’，$依赖项[“依赖项”]，$依赖项[“版本”]);}}

这个文件非常方便。一旦你引用了它，你就再也不用担心更新你的依赖关系了！

绕过构建过程

你可能想知道，我为什么需要这个？它所做的就是将代码转换为我自己也可以轻松编写的代码.

好吧，简单的答案是，你没有。您可以完全绕过构建过程，编写标准的JavaScript；它会很好地工作。

例如：

const MyComponent=函数（）{return wp.element.createElement（wp.components.Button，null，“'点击我！”）；}

此代码完全有效区块开发示例根本不使用构建过程的存储库。

使用构建过程的好处

同样，您实际上不必使用构建过程。它完全是可选的。

但看看您从构建过程中获得了什么：

• 自动块检测
• 自动化依赖关系管理
• JSX的使用
• 导入语法
• 静态代码分析
• 可用命令

全部免费！（开玩笑…）但看看你为什么想要这些福利。

自动块检测

如果您正在构建自定义块，则构建过程可以自动检测并构建任何块添加到您的项目中。

自动化依赖关系管理

我们已经讨论了自动依赖项管理，但这里有一点：如果您不使用自定义块的构建过程，您仍然需要创建索引资产.php文件。这是块注册所必需的。然后您可以手动更新依赖项。

因此，正如他们在那些俗气的警察节目中所说的：你可以用艰难的方式，也可以用简单的方式。

您可以使用JSX

使用生成过程时，可以使用JSX语法这是许多开发人员在React.js中使用的JavaScript的语法扩展，这是Gutenberg构建的框架。它的语法看起来很像HTML，这使得它比普通js更容易阅读（也更容易维护！）。

JSX公司

返回(<p{…使用BlockProps（）}>{ __(“My First Block–编辑您好！”，'我的第一块') }</p>);

香草JavaScript

返回el(“p”，使用块属性（），__（“My First Block–hello from the editor！”、“My-First-Block”）);

导入语法

利用构建过程可以使用JavaScript模块导入和导出文件和组件。这使得您的代码更容易组织，也更容易重用。

静态代码分析

构建过程为您提供了许多工具，可以检查代码的格式并修复linting问题。自动。

还有更多

而上述好处只是开始。有更多的命令和其他工具可以让你的生活更轻松，让你的项目更好。请在官方文档中查看@wordpress/脚本包裹

{“脚本”：{“构建”：“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:md:js”：“wp-scripts lint-md-js”，“lint:pkg json”：“wp-scripts lint-pkg json”，“包更新”：“wp-scripts包更新”，“plugin-zip”：“wp脚本plugin-zip”，“start”：“wp-scripts start”，“测试：e2e”：“wp-scripts测试-e2e”，“test:unit”：“wp-scripts test-unit-js”}}

自定义Webpack配置

作为官方文件指出，您可以根据自己的需要定制webpack。怎么用？添加webpack.config.js，然后扩展默认配置。我们可以在接下来的一周里研究所有可以扩展配置的方法，但这远远超出了本文的范围。只需说一句，在webpack文档中有很多东西需要解压缩。

但这里有一个常见的案例值得讨论。

如果您想在项目中创建自定义块，但还需要为另一个用例生成单独的文件，该怎么办？例如，如果要生成SlotFill，该怎么办？

要开始，您需要添加一个新的入口点.

//从@wordpress/scripts包导入原始配置。const defaultConfig=require（'@wordpress/scripts/config/webpack.config'）；//导入helper以查找并生成src目录中的入口点const{getWebpackEntryPoints}=require（'@wordpress/scripts/utils/config'）；//通过扩展Webpack配置添加新的入口点。模块导出={…默认配置，条目：{…获取WebpackEntryPoints（），自定义：'/路径/to/index.js'，},};

这里需要注意的是，您还需要维护动态检测和构建块的功能—通常使用获取Web包入口点功能。