此篇介紹如何加入並使用 babel-loader，並使用 ES6 語法測試撰寫 js。

安裝 babel-loader

1
npm i -D babel-loader babel-core babel-preset-env

設定 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
......

module.exports = {
  ......
  module: {
    rules: [
      ......
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 打包時排除 node_modules 資料夾
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'] // 使用 babel-preset-env
          }
        }
      }
    ]
  },
  ......
}

注意：此範例把 Babel 設定直接寫在 webpack.config.js，若 options 設定較複雜的話，可另外寫在 .babelrc 檔案中，參考Babel官網。

測試 ES6 語法

新增檔案 ./src/js/es6.js，撰寫程式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
export default class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.sqrt(dx*dx + dy*dy);
  }
}

將剛剛寫的程式 import 到 app.js。

1
2
3
4
5
6
7
8
9
10
......

import Point from './js/es6'

// Test for ES6
// https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(`Test ES6 Distance: ${Point.distance(p1, p2)}`);

執行 npm run dev，就可以看到 console 出現計算後的兩點長度囉。

執行 npm run dev 後畫面

更多 babel-preset-env 的配置選項可參考官網，有空也可以來試試 ES7 的 async, await 喔，我們下次見！

範例 Github

參考資料