在前端开发中，Babel 被广泛地应用于将 ES6+ 的代码转换为浏览器可兼容的 ES5 代码。在这个过程中，开发者通常需要使用一些帮助函数和类的 polyfill 来弥补一些新特性的缺失。而对于这个需求，有两个主要的 Babel 转换工具：babel-transform-runtime 和 babel-polyfill。本文将对这两个转换工具进行详细的讲解和比较，并提供相应的示例代码。
Babel-polyfill
babel-polyfill 是一个运行时插件，用于实现 ES6+ 的新特性。它的工作原理是在全局对象中添加一些新的原生对象和方法，来提供 ES6+ 语法的实现，同时保持最大的兼容性。
使用 babel-polyfill 可以非常方便地实现对语言特性的支持，只需要在入口文件中引入 babel-polyfill 即可，例如：
import "babel-polyfill";
babel-polyfill 会在所有代码执行之前被导入，同时会修改全局对象，从而提供 ES6+ 的新特性的支持。但是，此时应该注意 babel-polyfill 会在全局对象中增加很多 polyfill，所以对于复杂项目而言，这将导致项目文件体积的增大。
Babel-transform-runtime
和 babel-polyfill 不同，babel-transform-runtime 是一个编译时插件，它会将代码中的帮助函数和类与 babel-runtime 模块关联起来。这个模块中包含了一些常用的帮助函数，如 Array、Promise 等。在编译过程中，Babel 会使用这些模块来转换你的代码，因此不会对全局对象做出修改。
使用 babel-transform-runtime 需要通过 npm 安装 babel-runtime 模块。例如：
npm install --save-dev babel-plugin-transform-runtime npm install --save babel-runtime
安装完毕后，需要在 .babelrc 文件中配置 plugin，例如：
{
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}比较
babel-polyfill 和 babel-transform-runtime 之间最大的区别就是它们对全局变量和修改的处理方式。babel-polyfill 会修改全局环境和对象，因此会增加一些体积，并且会有潜在的命名冲突风险。而 babel-transform-runtime 只是将常用的函数和类关联起来，因此不会对全局环境造成影响。
因此，在选择使用 babel-polyfill 和 babel-transform-runtime 时，需要根据具体的情况进行选择。如果是简单的项目，可以使用 babel-polyfill 来尽可能地实现对 ES6+ 的支持；如果是大型的项目，则应该选择 babel-transform-runtime 来避免潜在的命名冲突和体积增大风险。
结论
在在编译和运行的环节中，babel-polyfill 和 babel-transform-runtime 来实现 ES6+ 支持。两种方式各有优劣：
- babel-polyfill 增加 ES6+ 语法和 API 的全局方法和对象，可以更加方便地实现对新特性的支持，但同时也会增加很多体积，并可能存在潜在的命名冲突问题。（需全局引入）
- babel-transform-runtime 通过组织常用的函数和类的使用，从而避免了全局污染，同时也提供了更高度封装的特性支持（使用前安装依赖）
具体使用取决于使用者需求和项目环境，在选择中需要结合项目的情况进行决策。
示例
babel-polyfill
import "babel-polyfill";
class Test {
async foo() {
await Promise.resolve();
}
}babel-transform-runtime
class Test {
async foo() {
await Promise.resolve();
}
}.babelrc
{
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4d62ac5c563ced565d016