在前端开发中，Babel 是一个非常重要的工具，它可以将 ES6+ 的代码转换为可以在当前浏览器中运行的代码。在使用 Babel 进行转换时，我们通常会用到 Babel-runtime 和 Babel-plugin-transform-runtime 这两个工具，它们有什么区别呢？本文将详细介绍它们的区别以及使用方法。
Babel-runtime
Babel-runtime 是一个运行时库，它提供了一些 ES6+ 的方法，例如 Promise 和 Symbol 等，这些方法在转换后的代码中会被使用。Babel-runtime 并不会将这些方法直接插入到代码中，而是通过引入运行时库的方式来使用这些方法。
使用 Babel-runtime 时，我们需要在代码中引入它：
import 'babel-runtime';
在引入 Babel-runtime 后，我们就可以使用其中提供的 ES6+ 方法了：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ---------------- -- ------ --- -------------------- -- - ------------------- ---展开代码
Babel-plugin-transform-runtime
Babel-plugin-transform-runtime 是一个 Babel 插件，它会在转换时将代码中用到的 ES6+ 方法替换为 Babel-runtime 中提供的方法。这样，在生成的代码中就不会包含这些方法的定义，从而减小代码体积。
使用 Babel-plugin-transform-runtime 时，我们需要先安装它：
npm install --save-dev @babel/plugin-transform-runtime
然后，在 Babel 的配置文件中配置它：
{ "plugins": [ ["@babel/plugin-transform-runtime", { "corejs": 3 }] ] }
其中，corejs 选项表示使用的 core-js 版本，这里我们使用了最新的版本 3。
使用 Babel-plugin-transform-runtime 后，我们就可以像使用 ES6+ 方法一样使用它们了：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ---------------- -- ------ --- -------------------- -- - ------------------- ---展开代码
在这段代码中，我们并没有引入 Babel-runtime，但是在转换后的代码中，Promise 和 console.log 等 ES6+ 方法都被替换成了 Babel-runtime 中提供的方法。
区别与指导意义
Babel-runtime 和 Babel-plugin-transform-runtime 都是用来处理 ES6+ 方法的工具，它们的区别在于：
- Babel-runtime 是一个运行时库，提供了 ES6+ 方法的定义，需要在代码中引入它；
- Babel-plugin-transform-runtime 是一个 Babel 插件，用于转换代码中的 ES6+ 方法，会将其替换为 Babel-runtime 中提供的方法。
使用哪个工具取决于实际情况。如果你的代码中只用到了少量的 ES6+ 方法，可以考虑使用 Babel-runtime；如果你的代码中使用了大量的 ES6+ 方法，可以考虑使用 Babel-plugin-transform-runtime。
需要注意的是，使用 Babel-plugin-transform-runtime 时，需要在 Babel 配置文件中配置它，否则无法生效。
示例代码
下面是一个使用 Babel-plugin-transform-runtime 的示例代码：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ---------------- -- ------ --- -------------------- -- - ------------------- ---展开代码
在转换后的代码中，Promise 和 console.log 等 ES6+ 方法都被替换成了 Babel-runtime 中提供的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d41921a941bf71347c1fd1
