babel-polyfill & babel-runtime & babel-preset-env

babel-preset-env和plugin-transform-runtime区别

使用 @babel/plugin-transform-runtime 编译后的代码和之前的 @babel/preset-env 编译结果不一样，
它使用了帮助函数, 并且赋予了别名 ， 抽出为公共方法， 实现复用。 比如它用了 _Promise 代替了 new Promise ， 从而避免了创建全局对象

preset-env 和 plugin-transform-runtime同时使用

useage 和 @babel/runtime 同时使用的情况下比较智能， 并没有引入重复的 polyfill

个人分析原因应该是： babel 的 plugin 比 prset 要先执行， 所以preset-env 得到了 @babel/runtime 使用帮助函数包装后的代码，而 useage 又是检测代码使用哪些新特性来判断的， 所以它拿到手的只是一堆 帮助函数， 自然没有效果了

.babelrc

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

entry 和 @babel/runtime

跟 useage 的情况不一样， entry 模式下， 在经过 @babel/runtime 处理后不但有了各种帮助函数还引入了许多polyfill， 这就会导致打包体积无情的增大

个人分析: entry 模式下遭遇到入口的 import "core-js" 及就立即替换为当前目标浏览器下所需的所有 polyfill, 所以也就跟 @babel/runtime 互不冲突了， 导致了重复引入代码的问题， 所以这两种方式千万不要一起使用， 二选一即可

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "entry"
      }
    ]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

@babel/plugin-transform-runtime默认情况下安装@babel/runtime这个库，即corejs为false时使用；
当corejs设置为2时，需要安装使用@babel/runtime-corejs2。
runtime和runtime-corejs2这两个库唯一的区别是，corejs2这个库增加了对core-js这个库的依赖，
而core-js是用来对ES6各个语法polyfill的库，所以在corejs为false的情况下，只能做语法的转换，并不能polyfill任何api。

总结

1. @babel/preset-env 拥有根据 useBuiltIns 参数的多种polyfill实现，优点是覆盖面比较全（entry）， 缺点是会污染全局， 推荐在业务项目中使用

   • entry 的覆盖面积全， 但是打包体积自然就大，
   • useage 可以按需引入 polyfill, 打包体积就小， 但如果打包忽略node_modules 时如果第三方包未转译则会出现兼容问题
2. @babel/runtime 在 babel 7.4 之后大放异彩， 利用 corejs 3 也实现了各种内置对象的支持， 并且依靠 @babel/plugin-transform-runtime 的能力，沙箱垫片和代码复用， 避免帮助函数重复 inject 过多的问题， 该方式的优点是不会污染全局， 适合在类库开发中使用

   上面 1， 2 两种方式取其一即可， 同时使用没有意义, 还可能造成重复的 polyfill 文件

对比以上三种方案，我们得出以下结论

方案没有绝对的优劣，在开发过程中还是要根据实际情况灵活运用。

几个包的包含关系

   babel-polyfill仅仅是引用core-js、regenerator-runtime这两个npm包。

   @babel/runtime包含两个文件夹：helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator（仅仅是引用regenerator-runtime这个npm包）。

   @babel/runtime-corejs2包含三个文件夹：core-js（引用core-js这个npm包）、helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator（仅仅是引用regenerator-runtime这个npm包）。

   可以看出，@babel/runtime-corejs2≈@babel/runtime + babel-polyfill：

   @babel/runtime只能处理语法关键字，而@babel/runtime-corejs2还能处理新的全局变量（例如，Promise）、新的原生方法（例如，String.padStart ）；

   使用了@babel/runtime-corejs2，就无需再使用@babel/runtime了。