随着前端开发越来越复杂，新的 ECMAScript 版本也越来越频繁的推出。为了支持这些新特性，我们需要使用一些工具来转换和兼容浏览器。
Babel 是一个流行的 JavaScript 编译器，它提供了将 ES6+ 代码转换为可以在现代浏览器中运行的 JavaScript 代码的功能。Babel-runtime 和 Babel-polyfill 都是 Babel 的关键模块，用于提供运行时支持和补充缺失的 ES6+ 特性。
Babel-runtime
Babel-runtime 是一个单独的 npm 包，可用于在许多 JavaScript 环境中使用 Promise、Symbol 和 Map 等新的原生对象。它通过创建全局标识符，实现新增的原生对象的转换，由此可以在未实现这些新对象的浏览器中使用。它将产生一个非常干净的结果，而 REPL 等环境则不会污染全局范围。
在 Babel 编译中如果需要使用一些 ES6+ 的内置方法，Babel-runtime 会自动注入对应的帮助方法，而且不会重复引用，会将所有的帮助方法打包到一个单独的文件中，可以让我们的代码更加简洁轻便。
在项目中安装 Babel-runtime：
npm install --save babel-runtime
然后在 .babelrc 指定 runtime 插件：
{
"plugins": ["transform-runtime"]
}Babel-polyfill
Babel-polyfill 能够在从未引入新功能的原生浏览器 (IE 之类的) 上运行，而不会破坏全局范围。它通过添加多个全局预定义变量 (如 Promise、Map) 来实现补充特性。
Babel-polyfill 非常适合在旧版本的浏览器中使用，它将添加不支持的方法和原型 （Array.prototype.includes()、Array.prototype.findIndex()）以及所有的内置方法，但它会增加大约 30K 的代码，对于有文件大小限制的服务器和客户端来说不太友好。
在项目中安装 Babel-polyfill：
npm install --save babel-polyfill
在应用程序的入口点（比如 index.js）中，我们可以通过导入 polyfill 来包含：
import 'babel-polyfill';
或者在 webpack 配置中使用：
module.exports = {
entry: [
"babel-polyfill",
"./app/js"
],
...
}使用场景
如果您正在编写应用程序并希望能够支持 IE 或其他旧浏览器，那么您必须使用 Babel-polyfill。
如果您正在编写将被打包为 NPM 包的库，则应使用 Babel-runtime。这可以确保您的库不会和其他使用 Babel-runtime 的库之间产生任何冲突。
示例代码
// example.js
const obj = {
a: 1,
b: 2
};
console.log(Object.values(obj));使用 Babel 编译示例代码：
babel example.js -o example-compiled.js
使用 Babel-polyfill 编译示例代码：
import 'babel-polyfill';
const obj = {
a: 1,
b: 2
};
console.log(Object.values(obj));使用 Babel-runtime 编译示例代码：
import values from 'babel-runtime/core-js/object/values';
const obj = {
a: 1,
b: 2
};
console.log(values(obj));在使用 Babel-runtime 需要安装 core-js：
npm install --save core-js
总结
Babel-runtime 和 Babel-polyfill 都是非常重要的工具，用于在浏览器中实现新的 ES6+ 特性和内置函数。Babel-runtime 更适合用在编写将被打包为 NPM 包的库、Web 组件等环境下，而 Babel-polyfill 更适合用在需要支持旧浏览器的应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490254c48841e9894e513de