什么是 babel-plugin-external-helpers-2
babel-plugin-external-helpers-2 是一个 Babel 插件，它可以将通用的帮助函数提取为独立的模块，从而减小转换后的代码体积。这些帮助函数通常是用来实现一些 JavaScript 的特性或者实现新的 ECMAScript 规范中的功能。
如何使用 babel-plugin-external-helpers-2
安装
在使用 babel-plugin-external-helpers-2 之前，你需要先安装 babel-core 和 babel-plugin-external-helpers-2 两个包，可以使用以下命令进行安装：
npm install --save-dev babel-core babel-plugin-external-helpers-2
配置
配置 babel-plugin-external-helpers-2 也很简单，只需要在 .babelrc 文件中添加以下内容：
{ "plugins": [ "external-helpers-2" ] }
示例代码
下面是一个例子，它使用了 babel-plugin-external-helpers-2 插件：
import { foo } from './utils'; export default function bar() { const a = 'Hello'; const b = 'World'; foo(`${a} ${b}`); }
转换后的代码：
-- -------------------- ---- ------- ------ ------------------ ---- ------------------------------------------- ------ ---------------------- ---- ----------------------------------------------- ------ - --- - ---- ---------- --- ---------------- ------ ------- -------- ----- - --- - - -------- --- - - -------- ------------------------------------------ -- ---------------- - --------------------------- - -- ------ ------------------------------------ -展开代码
可以发现，转换后的代码引入了两个新的模块 _toConsumableArray 和 _taggedTemplateLiteral，这是 babel-plugin-external-helpers-2 的作用。
总结
使用 babel-plugin-external-helpers-2 可以让我们的代码更加简洁、易读，并且减小了代码体积，可以提高网站的加载速度。同时，这个插件也提醒我们要关注代码体积的问题，并且尽可能地减少代码的重复使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/138716
