ES6（ECMAScript 6）是现代 JavaScript 的一项重要规范，它带来了许多新特性和语法糖，可以提高开发效率和编程体验。尽管这些新特性在现代浏览器和 Node.js 环境下已经得到了广泛支持，但在一些较旧的目标环境下，这些特性可能无法使用，需要借助 babel 等工具进行转译和降级处理。
在 babel 转译过程中，如果使用了一些新特性，比如箭头函数、类和模块化语法，它们在转换后的代码中可能会被转换成一些额外的辅助函数或附加代码。而这些辅助函数或代码可能会很大，导致输出的 JavaScript 代码体积过大，影响性能。
为了解决这个问题，可以使用 babel-plugin-transform-runtime 插件，它可以将转译后的代码中的这些辅助函数和代码抽离出来放到运行时库（runtime）中，在目标环境中只需要引入这个运行时库就可以了。不过，需要注意的是，在不同的目标环境下，可能需要使用不同的 transform-runtime 插件和运行时库才能正确工作。
目标环境列表
在使用 babel-plugin-transform-runtime 插件时，需要选择一个适合目标环境的运行时库，以便能够正确地转译和运行代码。以下是常见的目标环境列表和相应的 babel-plugin-transform-runtime 插件和运行时库：
- 浏览器环境 -
@babel/plugin-transform-runtime+@babel/runtime-corejs3：
-- -------------------- ---- ------- - ---------- - - ---------------------------------- - --------- - - - - -展开代码
- Node.js 环境 -
@babel/plugin-transform-runtime+@babel/runtime-corejs3：
-- -------------------- ---- ------- - ---------- - - ---------------------------------- - --------- - - - - -展开代码
- React Native 环境 -
@babel/plugin-transform-runtime+@babel/runtime-corejs3：
-- -------------------- ---- ------- - ---------- - - ---------------------------------- - --------- - - - - -展开代码
- webpack 构建环境 -
@babel/plugin-transform-runtime+@babel/runtime：
{ "plugins": [ "@babel/plugin-transform-runtime" ] }
使用示例
使用 babel-plugin-transform-runtime 插件需要进行如下配置和安装：
npm install --save-dev @babel/core @babel/plugin-transform-runtime npm install --save @babel/runtime # 以 core-js@3 为例，需要安装 core-js@3
然后在 babel 配置文件中增加插件：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- - ----- --- --------- --- --------- --- ---------- --- ------- --- ------- --------- - - - -- ---------- - - ---------------------------------- - --------- - - - - -展开代码
上面的配置文件中同时使用了 @babel/preset-env 将 ES6 语法转换成目标环境支持的语法，以及 @babel/plugin-transform-runtime 将转换后的代码中的辅助函数和代码抽离出来放到运行时库中。其中 corejs 参数指定了使用的 core-js 版本，这里使用的是 core-js@3。
假设在源代码中使用了一个箭头函数：
const add = (a, b) => a + b;
在转译后的代码中，箭头函数会被转换成 function：
var add = function add(a, b) { return a + b; };
为了减小输出的 JavaScript 代码体积，同时保持不改变原代码的行为，babel-plugin-transform-runtime 插件在转译的过程中会引入 regeneratorRuntime 和 wrap SafeRequire 等运行时函数或工具函数，这些函数或工具函数会被放到运行时库中。如下面的输出代码所示：
-- -------------------- ---- ------- ---- -------- ----------------------------------------------- ---------------------------------------------- -------------------------------------------------- ----------------------------------------- ------------------------------------------------- --- ----- - ---------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - ----- --- - --- -- -- - - --展开代码
在运行时，需要使用正确的运行时库将这些引入的函数或工具函数加载到当前环境中。比如，在 webpack 构建环境中，需要安装 @babel/runtime 并将它加入到项目的依赖列表中：
npm install --save @babel/runtime
然后在项目的打包配置文件中，将 @babel/runtime 引入并打包到输出的 JavaScript 文件中：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- -------------- - - ------ ----------------- ------- - --------- ------------------- ----- ----------------------- ------- -- -------- - --- ------------------- -- ------- - ------ - - ----- ---------- -------- --------------- ---- - ------- --------------- -------- - -------- ---------------------- -------- - - ---------------------------------- - ------- - - - - - - - - - --展开代码
实际上，由于不同的目标环境可能需要不同的插件和运行时库，因此在使用 babel-plugin-transform-runtime 进行转换时，需要根据目标环境进行适当的配置和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b83c26306f20b3a65d6441
