介绍
Babel 是前端开发中最常用的编译器之一，它可以将 ES6/ES7/ES8 代码编译成 ES5 代码，以便能够在当前的主流浏览器中执行。Babel-plugin-external-helpers 插件是 Babel 的一个辅助插件，主要用于将 Babel 生成的帮助函数抽离出来，以避免重复生成，从而减小打包后的文件体积。
使用方法
安装
在使用 Babel-plugin-external-helpers 插件前，我们需要先将其安装到项目中：
npm install --save-dev babel-plugin-external-helpers
配置
要使用 Babel-plugin-external-helpers 插件，需要在 .babelrc 文件中添加以下配置：
{
"plugins": [
["external-helpers"]
]
}在添加配置后，Babel 会将每个模块中使用到的帮助函数转化为对一个外部模块的引用。
示例代码
假设我们有以下 ES6 代码：
const sum = (...args) => args.reduce((prev, curr) => prev + curr, 0);
Babel 将该代码编译后可能会生成以下代码：
-- -------------------- ---- -------
---- --------
--- --- - -------- ----- -
--- ---- ---- - ----------------- ---- - ------------ ---- - -- ---- - ----- ------- -
---------- - ----------------
-
------ -------------------- ------ ----- -
------ ---- - -----
-- ---
--然而，从上面的代码可以看出，Babel 生成了一个名为 _interopRequireDefault 的帮助函数。如果我们的项目中有很多这样的代码，这些帮助函数很可能会被重复生成，导致打包后的文件体积增大。
为了避免这种情况，我们可以将这些帮助函数抽离并放到单独的一个文件中。在使用 Babel-plugin-external-helpers 插件时，可以将这个文件的路径作为参数传给该插件：
{
"plugins": [
["external-helpers", {"helperVersion": "7.0.0-beta.0", "whitelist":["classCallCheck", "createClass","extends","defineProperty","objectSpread"]} ]
]
}在这个配置中，我们指定了一个名为 helperVersion 的参数，这个参数用来指定使用哪个版本的帮助函数。我们也可以使用 whitelist 参数来显式地指定我们需要使用的帮助函数。
最终，我们的代码将变为：
-- -------------------- ---- -------
---- --------
--- ---------------------- - --------------------------------------------------------
--- ---------------- - -------------------------------------------------------------------------
--- ------------- - ----------------------------------------------------------------------
--- --------- - ------------------------------------------------------------------
--- ---------------- - -------------------------------------------------------------------------
--- --- - -------- ----- -
--- ---- ---- - ----------------- ---- - --- ------------ ---- - -- ---- - ----- ------- -
---------- - ----------------
-
------ -------------------- ------ ----- -
------ ---- - -----
-- ---
--从上面的代码可以看出，Babel 将 _interopRequireDefault、_classCallCheck、_createClass、_extends 和 _defineProperty 等帮助函数都抽离出来了，并且将它们从单个模块中引用。这样一来，就能够避免生成重复的帮助函数，从而减小打包后的文件体积。
注意事项
- Babel-plugin-external-helpers 插件需要在其他插件之前使用，以便它能够正确地抽离所有的帮助函数。
- 在使用
whitelist参数时，需要确保指定的帮助函数已经被安装在依赖中。 - 尽管使用 Babel-plugin-external-helpers 插件可以减少打包后的文件体积，但是它也会增加一些额外的代码引用和路径解析。因此，在使用该插件时应权衡利弊。如果项目中只有少量的帮助函数，可以考虑不使用此插件。
总结
Babel-plugin-external-helpers 插件可以将 Babel 生成的帮助函数抽离出来，避免生成重复的帮助函数，从而减小打包后的文件体积。使用该插件需要将其正确地配置，并注意其中的一些注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f26bb7d4982a6eb826a8c