Babel7 轉碼（二） - @babel/preset-env + @babel/polyfill

@babel/preset-env + @babel/polyfill

webpack 搭建文檔： https://webpack.eleven.net.cn

@babel/preset-env + @babel/polyfill 能夠徹底實現 ES 基礎語法的轉譯 + 新 API 的轉譯，這是配置 Babel 轉碼的第一種方式。

@babel/preset-env

基本的語法轉換，須要添加預設 @babel/preset-env。

1. 安裝依賴包

   yarn add @babel/preset-env -D

2. 添加配置

   {
     "presets": [
       [
          "@babel/preset-env",
          {
            "modules": false, // 對ES6的模塊文件不作轉化，以便使用tree shaking、sideEffects等
          }
       ]
     ],
     "plugins": []
   }

Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign）都不會轉碼。
轉譯新的 API，須要藉助polyfill方案去解決，使用 @babel/polyfill或 @babel/plugin-transform-runtime，二選一便可。

@babel/polyfill

本質上@babel/polyfill是core-js庫的別名，隨着core-js@3的更新，@babel/polyfill沒法從2過渡到3，因此@babel/polyfill已經被放棄，請查看 corejs 3 的更新。

1. 安裝依賴包：

   yarn add @babel/polyfill

2. .babelrc 文件寫上配置，@babel/polyfill 不用寫入配置，會根據useBuiltIns參數去決定如何被調用。

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "entry",
           "modules": false,
           "corejs": 2, // 新版本的@babel/polyfill包含了core-js@2和core-js@3版本，因此須要聲明版本，不然webpack運行時會報warning，此處暫時使用core-js@2版本（末尾會附上@core-js@3怎麼用）
         }
       ]
     ]
   }

3. 配置參數

   1. modules，"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默認值是 auto。
      用來轉換 ES6 的模塊語法。若是使用 false，將不會對文件的模塊語法進行轉化。
      若是要使用 webpack 中的一些新特性，好比 tree shaking 和 sideEffects，就須要設置爲 false，對 ES6 的模塊文件不作轉化，由於這些特性只對 ES6 的模塊有效。

   2. useBuiltIns，"usage" | "entry" | false，默認值是 false。

      • false：須要在 js 代碼第一行主動 import '@babel/polyfill'，會將@babel/polyfill 整個包所有導入。
        （不推薦，能覆蓋到全部 API 的轉譯，但體積最大）
      • entry：須要在 js 代碼第一行主動 import '@babel/polyfill'，會將 browserslist 環境不支持的全部墊片都導入。
        （可以覆蓋到‘hello‘.includes(‘h‘)這種句法，足夠安全且代碼體積不是特別大）
      • usage：項目裏不用主動 import，會自動將代碼裏已使用到的、且 browserslist 環境不支持的墊片導入。
        （可是檢測不到‘hello‘.includes(‘h‘)這種句法，對這類原型鏈上的句法問題不會作轉譯，書寫代碼需注意）
   3. targets，用來配置須要支持的的環境，不只支持瀏覽器，還支持 node。若是沒有配置 targets 選項，就會讀取項目中的 browserslist 配置項。
   4. loose，默認值是 false，若是 preset-env 中包含的 plugin 支持 loose 的設置，那麼能夠經過這個字段來作統一的設置。