前言
在开发前端应用时，我们常常需要使用一些 ES6 或更高版本的语法，但这些语法并不被所有浏览器完全支持。为了解决这个问题，我们需要将代码转换成可以在所有浏览器上运行的 ES5 代码。而 Babel 就是一个优秀的解决方案。它是一个 JavaScript 编译器，可以将 ES6 或更高版本的代码转换成 ES5 代码，从而在任何浏览器上运行。
在使用 Babel 进行转换时，我们可以使用 Babel 插件。其中，BabelPluginExternalHelpers 和 babel-plugin-transform-runtime 是两个非常重要的插件。本文将分析它们的区别以及如何使用它们。
BabelPluginExternalHelpers
BabelPluginExternalHelpers 是一个 Babel 插件，它将 Babel 的一些内部帮助函数提取到单独的文件中，以避免重复生成。这些帮助函数包括像 _createClass、_classCallCheck、_classCallCheck2 等方法。
在使用 BabelPluginExternalHelpers 时，我们需要在 .babelrc 文件中添加以下配置：
{
"plugins": [
"external-helpers"
]
}这样，当 Babel 编译代码时，如果需要使用这些帮助函数，它们将被从 external-helpers.js 文件中提取出来，并被动态加载到当前文件中。
babel-plugin-transform-runtime
babel-plugin-transform-runtime 是一个帮助函数库，可以通过在代码中插入一些运行时的引用来减小编译后的代码体积。同时，它还可以使编译后的代码更易读，并避免在全局范围内污染命名空间。
在使用 babel-plugin-transform-runtime 时，我们首先需要安装它及相关的包：
npm install --save-dev babel-plugin-transform-runtime npm install --save @babel/runtime
其中，@babel/runtime 是 babel-plugin-transform-runtime 运行时的依赖。在 .babelrc 中加入配置：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- ------
----------- ------
-------------- ----
--
-
-其中，"helpers": false 表示不在编译后的代码中注入一些帮助函数，而是使用 @babel/runtime 包中的函数。这样可以使编译后的代码更小，避免污染全局命名空间。
区别
BabelPluginExternalHelpers 与 babel-plugin-transform-runtime 的主要区别在于与帮助函数有关。BabelPluginExternalHelpers 可以使你的代码更快地运行，因为它可以避免重复生成多个内部帮助函数。而 babel-plugin-transform-runtime 可以使你的代码更小更易读，并且可以避免在全局范围内污染命名空间。
但是，如果您使用了大量的 ES6 语法和内置函数，使用 babel-plugin-transform-runtime 可能会更好。因为 babel-plugin-transform-runtime 可以在代码中注入 polyfill，以便在老版本浏览器上运行。
总结
在应用 Babel 进行代码转换时，BabelPluginExternalHelpers 和 babel-plugin-transform-runtime 都是非常重要的插件。但是，它们在帮助函数的处理方式、代码体积和运行效率等方面有所不同。因此，在选择使用它们时，需要根据具体情况进行综合考虑。
示例代码
下面是一个使用 BabelPluginExternalHelpers 的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
--------- -
-----------------------
-
-
----- --- - --- ----------- -------
--------------编译后的代码：
-- -------------------- ---- -------
---- --------
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
--- ------ - -------- ------------ -
--------------------- --------
--------- - -----
--
------------------------ - -------- -- -
-----------------------
--
--- --- - --- ----------- -------
--------------下面是一个使用 babel-plugin-transform-runtime 的示例代码：
import { map } from "lodash";
const nums = [1, 2, 3, 4, 5];
const doubledNums = map(nums, (num) => num * 2);
console.log(doubledNums);编译后的代码：
-- -------------------- ---- ------- ---- -------- --- ---- - -------------------------------------------------------------------------------------- --- --------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - ----- ---- - --- -- -- -- --- ----- ----------- - --- ---------------------- - -------------------- --- -- --- - --- -------------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645db94c968c7c53b001f808