这几天又在折腾项目脚手架，看到之前的配置里用到 transform-runtime，于是就想研究下。找了半天，发现现有的文章、讨论都没有准确、合理的说明，所以写篇博客介绍一下。
定位
@babel/preset-env
@babel/preset-env 是一大堆插件的集合，包含了当前浏览器环境下，所有语言特性的插件，可以根据 browserslist 的结果，选择合适的插件将新语言特性转译成旧浏览器可以支持的表达方式。
官方推荐使用预制件（preset），可以大大节省配置时间，提高开发效率。
@babel/plugin-transform-runtime
babel 转译时，往往需要用到一些工具函数，比如 _extend。转译以文件为单位，意味着每个文件里都可能有重复的 babel 工具函数。现代化项目常有大量的文件，就可能产生重复和浪费。
@babel/plugin-transform-runtime 可以帮我们把直接写入文件里工具函数变成对 core-js 的引用，可以减少转译后的文件大小。
使用场景
从上面的定位可以看出，@babel/plugin-transform-runtime 跟 @babel/preset-env 并不重合，两者的功能没有交集。
对于任何需要考虑兼容性的项目，我们都应该使用 babel 进行转译，并使用 @babel/preset-env 降低配置的复杂度，大部分通用的配置如下：
module.exports = {
'presets': [
[
'@babel/preset-env',
{
'corejs': 3, // 使用 core-js@3 版本，core-js@2 从 ES2017 之后就没再更新了，不推荐使用
'useBuiltIns': 'usage', // 只转译用到的新语言元素
'bugfix': true, // v7.9 之后引入的新选项，尽量减小转译后的代码体积，v8 之后会变成默认选项
},
],
],
};小型项目可以到此为止，中大型项目、文件数量比较多的，可以引入 @babel/plugin-transform-transform。此时我们需要先安装两个依赖——注意，这俩依赖都要装：
# 用来开发、debug 和编译
npm i @babel/plugin-transform-runtime -D
# 用来在生产环境中使用
npm i @babel/runtime
# 如果要使用特定的 core-js 版本，也可以安装特定的 runtime
npm install --save @babel/runtime-corejs2
npm install --save @babel/runtime-corejs3接下来，修改上面的 babel.config.js，加入插件配置：
module.exports = {
// 重复上面的配置
"plugins": [
// 其它插件
[
"@babel/plugin-transform-runtime",
// 一般情况下我们使用默认配置即可
],
],
};完成。
库项目
库类项目也推荐使用 @babel/plugin-transform-runtime，因为库项目通常会面临另一个问题。如果我们直接导入 core-js 作 polyfill 的话，像 Promise，Set，Map 这样的全局对象就会被覆盖。对于一般的应用而言，问题不大；但如果是库，你无法预期其它开发者会在什么情况下使用你的库，很可能他的目标平台都支持这些新语法元素，不希望转译污染。
此时，使用 @babel/plugin-transform-runtime 可以让 babel 在转译时使用沙箱包装 polyfill，避免污染全局。
