Babel转ES6语法：babel-preset-env和babel-polyfill

Babel是JavaScript编译器器，能将ES6代码转换成ES5代码，让我们开发过程中放心使⽤JS新特性而不用担心兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。
Babel在执行编译的过程中，会从项⽬根目录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从loader的options地⽅读取配置。

babel-preset-env

---

1. 介绍

首先，介绍下历史背景，对了解和学习 babel-preset-env 有帮助。

最初，为了让开发者能够尽早用上新的JS特性，babel团队开发了babel-preset-latest。这个preset比较特殊，它是多个preset的集合(es2015+)，并且随着ECMA规范的更新更增加它的内容。

比如，当前(2018.06.02)，它包含的preset包括：es2017、es1016、es2015。

到了明年，可能它包含的preset就包括：es2018、es2017、es2016、es2015。

随着时间的推移，babel-preset-latest 包含的插件越来越多，这带来了如下问题：

1. 加载的插件越来越多，编译速度会越来越慢；

2. 随着用户浏览器的升级，ECMA规范的支持逐步完善，编译至低版本规范的必要性在减少（比如ES6 -> ES5），多余的转换不单降低执行效率，还浪费带宽。

因为上述问题的存在，babel官方推出了babel-preset-env插件。它可以根据开发者的配置，按需加载插件。配置项大致包括：

1. 需要支持的平台：比如node、浏览器等。

2. 需要支持的平台的版本：比如支持[email protected]等。

默认配置的情况下，它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset。

2. 安装：

   npm i babel-loader @babel/core @babel/preset-env -D
  npm i @babel/preset-env -D 

1. babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成 es5的⼯作，这部分工作需要⽤用到@babel/preset-env来做 ,
2. babel/core babel的核心库，提供了很多核心语法。

3. 配置：

Webpack.config.js文件中：

{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
            loader: "babel-loader",
            options: {
                  presets: ["@babel/preset-env"]
             }
       }
}

通过上面的几步，默认的Babel只支持let等⼀一些基础的特性转换，远远还不够，
Promise等⼀一些还有转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性 。

babel/polyfill

---

1. 安装：

npm install --save @babel/polyfill

2. 在需要转换的js文件中引入polyfill

import "@babel/polyfill";

• 缺点：polyfill引入新特性的方法：是以全局变量的⽅式注入进来的。如promise就是windows.Promise，它会造成全局对象的污染 。

3. 按需加载，减少冗余

因为polyfill包含了所有ECMA的新特性，默认会把所有特性注入进来，因此会发现打包的体积⼤了很多。假如我想我⽤用到的es6+，才会注⼊，没⽤用到的不注⼊，以此提升编译速度，从而缩小打包的体积，减少代码冗余。可不可以呢 ？
当然可以
修改下 .babelrc，加上配置参数"target"，它表示我们需要支持哪些平台：哪些版本。

options: {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",    //   程序支持支持 Edge 17
                    firefox: "60",  //   程序支持支持 firefox 60
                    chrome: "67", //   程序支持支持  chrome 67
                    safari: "11.1"  // 程序支持safari 11.1
                // 支持的配置有以下： chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.
                },
                corejs: 2,//新版本需要指定核⼼库版本 
                useBuiltIns: "usage"//按需注⼊
            } 
        ]
    ] 
}

• useBuiltIns 选项
  它是babel 7的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。

它有三个参数可以使用:

1. entry:

   "useBuiltIns": "entry",
   "corejs": 2,
   

   根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。

   这里需要指定 corejs 的版本, 如果 "corejs": 3, 则 import '@babel/polyfill' 需要改成

   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
   

2. usage: 不需要 import ，全自动检测，但是要安装 @babel/polyfill 。(试验阶段) 。

   usage会根据配置的浏览器兼容，以及你代码中用到的 API 来进行polyfill`，实现了按需添加。

3. false: 此时不对 polyfill 做操作。如果你 import "@babel/polyfill" ，它不会排除掉没有使用的垫片，无视配置的浏览器兼容，引入所有的 polyfill,这会造成程序体积会庞大。(不推荐)

   请注意: usage 的行为类似 babel-transform-runtime，不会造成全局污染， 因此也不会对类似 Array.prototype.includes() 进⾏polyfill。

参考文件https://www.01hai.com/note/av145385
https://www.babeljs.cn/docs/babel-preset-env
http://blog.ttionya.com/article-1695.html