前言
随着前端应用的规模不断增加，开发者们的代码也越来越倾向于使用 ES6 或者更新的语法来编写。然而，由于浏览器对这些语法的支持性还不够完善，因此我们需要使用 babel 将这些语法转换成浏览器能够理解的代码。
使用 babel 来转换代码的时候，我们常常会使用到 @babel/runtime 这个包。不过，如果在每个文件中都包含 @babel/runtime，那么编译后的代码就会变得臃肿且低效。因此，我们需要一个更加优化的方案，将相同的运行时代码提取成一个专门的模块，供所有文件共享调用。而这正是我们要介绍的 npm 包 @gerhobbelt/babel-plugin-transform-runtime 所能够实现的。
安装
在使用 @gerhobbelt/babel-plugin-transform-runtime 之前，我们需要先安装以下两个包：
--- ------- ------ ------------------------------- --- ------- ---------- --------------
使用方法
在项目根目录下新建一个 .babelrc 文件，并写入以下代码：
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
--
---------- -
-
---------------------------------------------
-
--------- -
-
-
-
-让我们逐一分析一下这段代码的含义：
"@babel/preset-env"：用于识别代码中使用了哪些语法，并将其转换成符合目标环境规范的代码。
"useBuiltIns": "usage"：告诉 babel 生成的代码需要按需加载 polyfill，以减少无用的代码加载，提高性能。
"corejs": 3：用于指定需要加载的 core-js 版本号，确保 babel 可以正确地加载所需要的 polyfill。
"@gerhobbelt/babel-plugin-transform-runtime"：将代码中的内联 helpers 提取到单独的模块中，以便减少编译过程中的代码冗余。
"corejs": 3：同样用于指定需要加载的 core-js 版本号。
示例代码
我们来看一个简单的示例，这是一个使用 ES6 语法编写的模块：
-- ------------ ----- --- - -- -- - ----------------- -- - ---- ----------- - -----
运行命令 babel src --out-dir lib，即可将 ES6 代码转换成 ES5 代码，并生成到 lib 目录中。
生成的代码如下所示：
-- ------------ ---- -------- --- ---------------------- - -------------------------------------------------------- --- --------- --- ---- - ----------------- --- ------------
将上述代码进行分析：
_interopRequireDefault：一个 helper 方法，用于对模块进行处理，以确保模块导出所提供的内容是可以按照预期使用的。_console：一个在每个模块中都必须引入的变量，用于处理 console API 的调用。_foo：我们的测试模块，其中的 foo 函数被转换成了 ES5 可以理解的代码。(0, _foo.foo)()：_foo 中的导出为一个函数，调用时需要指定其作用域。
生成的代码中，在需要的地方使用了 @_interopRequireDefault(helper) 来指定，确保不同的模块之间不会有重名变量的问题。
如果我们使用了 @gerhobbelt/babel-plugin-transform-runtime，那么生成的代码就会是这个样子：
-- ------------ ---- -------- --- ---------------------- - -------------------------------------------------------- --- ---- - ----------------- --- ------------
可以看到，在使用 @gerhobbelt/babel-plugin-transform-runtime 的代码中，helper 已经被提取到了 @babel/runtime-corejs3 包中，而其余的代码则保持不变。
结语
通过使用 @gerhobbelt/babel-plugin-transform-runtime，我们可以将相同的运行时代码提取出来，以减少冗余的代码加载，提高代码性能。如果您正在使用 babel 转换您的代码，并需要优化代码性能，请务必尝试使用 @gerhobbelt/babel-plugin-transform-runtime 这个 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f03df57403f2923b035be22