使用webpack將ES6轉化ES5

babel使用

打開babel官網，按教程安裝babel

• 安裝

npm install --save-dev babel-loader @babel/core  @babel/preset-env

• 配置rules

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

• 生成 .babelrc文件

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

此時webpack已經能正確的將高版本的js語法轉爲低版本的語法，可是對於新增的api並不會轉化，如promise。這時咱們就須要其餘的插件

使用polyfill插件，對於babel=>7.4.0該方法棄用

• 安裝

npm install --save @babel/polyfill

• 修改 .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
         "useBuiltIns":"usage" // 只轉化使用了的API
      }
    ]
  ]
}

• 使用 在須要轉換的文件裏引入polyfill

import "@babel/polyfill";

• @babel/polyfill 和 @babel/preset-env 的關係

@babel/preset-env 中與 @babel/polyfill 的相關參數有 targets 和 useBuiltIns 兩個

targets: 支持的目標瀏覽器的列表

useBuiltIns: 參數有 「entry」、」usage」、false 三個值。默認值是false，此參數決定了babel打包時如何處理@babel/polyfilll 語句。

「entry」: 會將文件中 import‘@babel/polyfilll’語句 結合 targets ，轉換爲一系列引入語句，去掉目標瀏覽器已支持的polyfilll 模塊，無論代碼裏有沒有用到，只要目標瀏覽器不支持都會引入對應的polyfilll 模塊。

「usage」: 不須要手動在代碼裏寫import‘@babel/polyfilll’，打包時會自動根據實際代碼的使用狀況，結合 targets 引入代碼裏實際用到 部分 polyfilll 模塊

false: 對 import‘@babel/polyfilll’不做任何處理，也不會自動引入 polyfilll 模塊

使用plugin-transform-runtime

• 安裝

npm install --save-dev @babel/plugin-transform-runtime

• 修改 .babelrc

{
"presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

注意上面corejs設置項，不一樣的值須要不一樣的依賴包

corejs的值	須要安裝的依賴包
false	npm install --save @babel/runtim
2	npm install --save @babel/runtime-corejs2
3	npm install --save @babel/runtime-corejs3