Webpack4 學習筆記 - 06：使用 Babel 處理 ES6 語法

Babel 配置逐步講解

修改 index.js 內容，寫一些 ES6 的語法：

const arr = [
    new Promise(() => {}),
    new Promise(() => {})
];

arr.map(item => {
    console.log(item);
})

ES6 很強大，但目前並非全部的瀏覽器都支持，因此須要用到 Babel，讓舊的瀏覽器或環境中將 ES6 代碼轉換爲向後兼容版本的 JavaScript 代碼。
來試一下吧，先安裝須要用的 Babel 包：

npm install babel-loader @babel/core -D

配置 webpack.config.js，增長一條 rulues ：

module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/, // 排除該目錄下的全部代碼
      loader: "babel-loader"
    }]
  }

babel-loader 告訴了 webpack 怎麼處理 ES6 代碼，但它並不會將ES6 代碼翻譯成向後兼容版本的代碼，若是想要執行這一步，還須要安裝一個模塊 preset-env，它包含了全部 ES6 代碼轉換的規則:

npm install @babel/preset-env -D

安裝完以後配置一下：

rules: [{
  test: /\.js$/,
  exclude: /node_modules/, // 排除該目錄下的全部代碼
  loader: 'babel-loader',
  options:{
    'presets': ['@babel/preset-env']
  }
}]

這樣，運行打包命令，就能夠把 ES6 語法翻譯成 ES5了，看一下打包的結果：

沒問題，語法已經翻譯成了當前全部瀏覽器能識別的語法，可是作到了這一點仍是不夠，由於那些比較新的對象和函數，好比這裏的 Promise 和 map，在低版本的瀏覽器裏實際仍是不存在的。因此這時不只要進行語法的轉換，還要想辦法把這些新的特性，補充到低版本的瀏覽器裏。怎麼作呢？ babel 提供了一個工具叫 polyfill，安裝：

npm install @babel/polyfill -D

而後在 index.js 的最頂部，引入這個包：

import '@babel/polyfill'

保存代碼，再次進行打包查看結果，能夠發現打包後的 main.js 裏面，有了不少代碼來幫助實現好比 Promise 和 map 這些新特性。看一下 main.js 文件的大小：

859KB，再看一下沒有使用 polyfill 以前的 main.js 大小：

只有4.36KB，使用 polyfill 以後文件變大了不少，這說明了 polyfill 使用了很是多的代碼來填入新特性。
可是，index.js 裏只使用了 Promise 和 map，其它的新特性都沒用，能不能把那些沒用到的實現方法都剔除了呢？ 能夠，給 preset-env 增長一個 useBuiltIns 配置：

rules: [{
  test: /\.js$/,
  exclude: /node_modules/, // 排除該目錄下的全部代碼
  loader: 'babel-loader',
  options: {
    'presets': [
      ['@babel/preset-env', {
        useBuiltIns: 'usage'
      }]
    ]
  }
}]

useBuiltIns: 'usage' 的意思就是說，當使用 polyfill 往低版本瀏覽器填入一些不存在的特性時，不是所有都填入，而是根據業務代碼使用到的特性去選擇填入，好比這裏使用了 Promise 和 map，那就只填入這兩個，其它的都不用。 再次打包查看結果：

能夠看到，main.js 的大小隻有 138KB了。
這裏還能夠配置一些其它的參數，好比 targets 參數：

rules: [{
  test: /\.js$/,
  exclude: /node_modules/, // 排除該目錄下的全部代碼
  loader: 'babel-loader',
  options: {
    'presets': [
      ['@babel/preset-env', {
        useBuiltIns: 'usage',
        targets:{
          edge: '17', // edge高於17的版本
          firefox: '60', // firefox 高於60的版本
          chrome: '67'  // chrome高於67的版本
        }
      }]
    ]
  }
}]

targets 是指打包會運行在什麼樣的瀏覽器，這有三個瀏覽器，並註明了最低版本。在打包的過程當中，babel 會去看這些瀏覽器對 ES6 代碼的支持狀況，是否有必要進行語法轉換、填入一些新特性。 運行打包命令查看結果：

發現仍是輸出的 Promise 和 map，並無進行新特性的填入，說明這三個版本的瀏覽器對 ES6 的支持已經很好了，不須要在進行額外的處理，main.js 的大小是變成了最初的4.36KB。

並且在 WebPack4 中，當配置了 useBuiltIns: 'usage' 時， 就不須要再手動寫 import '@babel/polyfill' 了，

使用 .babelrc 配置文件

當 babel 配置的項很是多時，webpack.config.js 文件會變的很長，不易維護，這時候能夠在同級目錄建立一個 .babelrc 文件，把配置項移入這個文件中：

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67"
            }
        }]
    ]
}

而後把 webpack.config.js 中 'babel-loader' 的 options 中去掉就好了。

到此爲止，webpack 對 ES6 的簡單處理就完成了。
關於 babel 還有不少東西和配置項，更多的知識要到 https://babel.docschina.org 來學習。