主要是照顧低版本瀏覽器相容問題

官方連線:ES6轉ES5

由babel開發

1、安裝依賴

npm install -D babel-loader @babel/core @babel/preset-env webpack

2、配置

  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,//不轉換node_model裡面的第三方包
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]

 

2、配置 babel-polyfill 來解決低版本瀏覽器不支援的API的問題

2.1、安裝

npm i -D babel-polyfill

2.2 配置

entry:['babel-polyfill','./src/main.js'],

這樣就會在打包的結果中提供一個墊腳片用以相容低版本瀏覽器中的不支援的API

3、 配置transform-runtime 來解決程式碼重複問題

在打包過程中，babel會在某些包提供一些工具函式，而這些工具函式可能會重複在多個模組中，這樣就會導致打包體積過大，所以babel提供了一個babel-transform-runtime來解決這個打包體積過大的問題

3.1 安裝

npm install -D @babel/plugin-transform-runtime
npm install @babel/runtime

3.2 配置

plugins: ['@babel/plugin-transform-runtime']