從 2015 年 JavaScript ES6 發佈，開始走向標準化之後，每年都會有新的語法與特性加入，但是瀏覽器的支援卻跟不上語法的改進速度，使用 Babel 可以將這些新的語法轉譯成支援度最高的 ES5 版本的 JavaScript，讓我們可以方便使用新語法帶來的好處，而不用煩惱支援性的問題。

安裝 Babel-loader

webpack 要使用 Babel 需要安裝以下三個套件

  • babel-loader 讀取資源轉化給 Webpack 使用
  • @babel/core 這是 Babel 的核心，轉譯程式碼

  • @babel/preset-env 依據 EMCA 規範，定義出來的轉譯規則。

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

裝完套件後 package.json 檔案會紀錄這三個套件資訊

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}

設定 Babel

編輯 webpack.config.js 檔案，新增 module 的屬性，然後將 Babel 的 loader 與 options 填寫進去。

// Node.js 內建用來處理路徑的模組
const path = require('path');
module.exports = {

  // Webpack 進入點
  entry: './src/index.js',
  
  // Webpack 輸出點
  output: {

    // 輸出的檔案名稱
    filename: 'main.js',
    
    // 輸出的檔案位置
    path: path.resolve(__dirname, './dist/'),
  },
  
  // 新增 Babel 的 Module
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

撰寫 ES6 程式

在 index.js 中撰寫 ES6 的程式碼

範例程式碼來源：Webpack教學 (四)：JavaScript 與 Babel

const Name = ['Mike', 'Jacky', 'Andy', 'Scars']
Name.forEach((obj, idx)=> console.log(`${idx} => ${obj}`))

使用 Webpack 編譯文件

npx webpack --mode development

檢查編譯後的程式碼，的確變成 ES5 的格式

使用瀏覽器檢查 Console 資訊，有順利輸出資訊

參考資料