Babel编译

Babel是一个js编译器，是一个源代码到源代码的转换。Babel可以让我们在js新规范和特性全面普及之前就可以使用它们。Babel的编译分为语法和API两部分：

· 语法，诸如const let ...解构、class语法等；
· API，诸如[].includes、[].reduce等

默认的Babel如下，只会编译语法，不会编译API：

{
  "presets": [["@babel/preset-env"]]
}

Babel提供了polyfill库进行api的转换，同时 @babel/preset-env 提供了配置参数 useBuiltIns 进行设置如何处理。

{
  "presets": [[
      "@babel/preset-env",
       {
          // ① 默认值 false 不进行api的转换
          // ② entry：需要在源代码顶部手动引入 @babel/polyfill ，但这样所有的polyfill库都会引入，增大打包体积
          // ③ usage：按需引入，源代码不必手动引入polyfill，减少打包体积，常见用法
          "useBuiltIns": false | entry | usage 
       }
    ]]
}

但是polyfill的引入还有种常见做法是，源代码处引入特定需要的polyfill库（如@babel/polyfill-xx，没用过）

上面的配置存在的问题：

1. polyfill的转换是通过直接global.Array.includes 或者 Array.prototype.includes 来实现的，这种做法直接修改全局变量及其原型，造成原型污染或者不可预测的问题；
2. babel对语法的转换，有时是通过一些称为helpers的辅助函数实现的，babel会在需要转换的地方把这些helpers函数都引入进来，造成代码重复，打包体积变大。

@babel/plugin-transform-runtime 这个插件解决了上面的问题，它需要配合@babel/runtime-corejs3使用。前者是转换代码，转换的代码会将后者的模块进行引入，所以前者运行在编译时，后者运行在运行时。这样helpers辅助函数和polyfill方法都从统一的 @babel/runtime-corejs3 引入，解决了上面的问题。

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

babel good