前言
现在的前端项目越来越复杂，使用了更多的 ES6+ 语言特性，为了在低版本浏览器上兼容这些特性，我们需要使用 Babel 来把 ES6+ 代码转成 ES5 代码。但是，Babel 转换后的代码会包含一些 helper 函数，这些函数会被插入到每一个文件中，导致打包后的文件较大。一个解决方案是使用 Babel-plugin-transform-runtime 插件来抽取 helper 函数到公共模块中，从而避免重复插入。
安装
首先需要安装 Babel-plugin-transform-runtime：
npm install --save-dev @babel/plugin-transform-runtime
使用
配置
在 .babelrc 中，添加 "transform-runtime" 插件以及它的"corejs"选项：
{ "plugins": [ ["@babel/plugin-transform-runtime", { "corejs": 3 }] ] }
注意，"corejs" 选项必须指定，因为它告诉 Babel-plugin-transform-runtime 使用哪个版本的 core-js 来作为 helper 函数的来源。
安装依赖
Babel-plugin-transform-runtime 还需要依赖 @babel/runtime，所以需要安装：
npm install --save @babel/runtime
使用示例
下面来看一个使用示例，使用 async/await 特性。
1.安装依赖
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime
2.配置.babelrc
-- -------------------- ---- ------- - ---------- - --------------------- - ---------- - ----- ---- -- -------------- -------- --------- - -- -- ---------- - ----------------------------------- - --------- - -- - -展开代码
3.编写代码
-- -------------------- ---- ------- ----- -------- --------- - ----- --- - ----- ------------------- ----- ---- - ----- ----------- ------ ----- - ------------------- -- - ------------------ ---展开代码
此处，我们使用 async/await 来发送 ajax 请求，使用了 Promise 和 fetch 方法。Babel 会把这段代码转成 ES5 代码，但会在每个文件中插入 Promise 和 fetch 的 helper 函数，这会导致打包后的文件较大。
4.使用 Babel-plugin-transform-runtime
-- -------------------- ---- ------- ------ ------------------ ---- ----------------------------- ------ ------------------ ----- -------- --------- - ----- --- - ----- ------------------- ----- ---- - ----- ----------- ------ ----- - ------------------- -- - ------------------ ---展开代码
在代码中，我们添加了一个 import 语句，导入了 Babel-runtime/regenerator 模块，这个模块提供了 async/await 执行所需的 helper 函数。我们还在入口文件中导入了 @babel/polyfill 模块，这个模块提供了一些 ES6+ 特性的 polyfill。
这样，Babel-plugin-transform-runtime 会把 fetch 等 helper 函数抽取到一个公共的 Babel-runtime 模块中，每次使用时再从 Babel-runtime 中引用，从而避免重复插入到每个文件中。
结语
使用 Babel-plugin-transform-runtime 可以有效减小打包后的 JS 文件体积，避免因为 helper 函数的重复插入，导致文件过大，加载缓慢。如果你的项目中使用了 async/await，Promise，Generator 等特性，不妨试试这个方式，把你的代码转成 ES5 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bdbb99a231b2b7ed0800a6
