Babel7 轉碼（三）- preset-env + transform-runtime

@babel/preset-env + @babel/plugin-transform-runtime

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

@babel/preset-env + @babel/plugin-transform-runtime 搭配使用，能夠完成基本語法轉譯 + ES 新語法的按需加載，這是配置 Babel 轉碼的第二種方式。

1. 安裝依賴包

   yarn add @babel/plugin-transform-runtime -D

   1. 若是配置參數 corejs 未設置或爲 false，需安裝依賴@babel/runtime（這部分代碼會被抽離並打包到應用 js 裏，因此能夠安裝在 dependencies 裏），僅對 es6 語法轉譯，而不對新 API 轉譯。

      yarn add @babel/runtime

   2. 若是配置參數 corejs 設置爲 2，需安裝依賴@babel/runtime-corejs2（同上，推薦安裝在 dependencies 裏。），對語法、新 API 都轉譯。

      yarn add @babel/runtime-corejs2

   3. 推薦使用corejs:2，可是，檢測不到‘hello‘.includes(‘h‘)這種句法，因此存在必定隱患，書寫代碼時需注意。
   4. @babel/runtime 和 @babel/runtime-corejs2 這兩個庫惟一的區別是：corejs2 這個庫增長了對 core-js（用來對 ES6 各個語法 polyfill 的庫）這個庫的依賴，因此在 corejs 爲 false 的狀況下，只能作語法的轉換，並不能 polyfill 任何新 API。

2. .babelrc 文件寫上配置

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false
         }
       ]
     ],
     "plugins": [
       [
         "@babel/plugin-transform-runtime",
         {
           "corejs": 2 // 推薦
         }
       ]
     ]
   }

3. 配置參數

   1. corejs，默認值是 false，只對語法進行轉換，不對新 API 進行處理；當設置爲 2 的時候，須要安裝@babel/runtime-corejs2，這時會對 api 進行處理。
   2. helpers，默認值是 true，用來開啓是否使用 helper 函數來重寫語法轉換的函數。
   3. useESModules，默認值是 false，是否對文件使用 ES 的模塊語法，使用 ES 的模塊語法能夠減小文件的大小。