Babel、Webpack、Mocha、ESLint のセットアップ #babel

ES6 (ES2015) 対応のために、Babel 6 を導入したところ、プリセットとプラグインの管理が思ったよりも煩雑になったので、セットアップの作業手順をまとめることにしました。

ES6 (ES2015) の使う機能を検討しておく

テストコードを Node.js (v8) だけで実行するだけですむのであれば、Node.js がサポートする機能だけ使えば、テストコードを Babel で変換しなくてすみます。

Babel

インストール

コマンドラインツールを導入します。

npm install -g babel-cli

Async/Await

「Async/Await を使って HTTP リクエストを送信する」の記事をご参照ください。

Webpack

セットアップ

rauschma/webpack-babel-demo のリポジトリを利用させてもらいます。

git clone https://github.com/rauschma/webpack-babel-demo.git
cd webpack-babel-demo/
npm install

webpack.config.js の内容を見てみましょう。loader に babel-loader、presets に es2015 が指定されていることを確認します。

webpack.config.js

module: {
  loaders: [
    {
      loader: 'babel-loader',
      test: dir_js,
      query: {
        presets: ['es2015'],
      },
    }
  ]
}

依存関係の書き方

どのような選択肢があるのかについてManaging Jquery plugin dependency in webpack の回答にまとめられています。

Mocha

インストール

グローバルなコマンドとして使えるようにインストールします。

npm install -g mocha

ES6 (ES2015) 対応

babel-core およびプリセットを導入します。

npm init -y
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev

node v5 でテストを実行するなら babel-preset-es2015 の代わりに babel-preset-es2015-node5 を使うこともできます。

npm install --save-dev babel-preset-es2015-node5

package.json に読み込むプリセットとプラグインを指定します。

package.json

{
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

テストのコードを用意します。

test/index.js

import assert from 'assert';

describe('test', () => {
  let foo = 'bar';

  it('bar を返す', () => {
    assert.equal('bar', foo);
  });
});

テストを実行してみましょう。

mocha test --compilers js:babel-core/register

npm test コマンドを定義します。

package.json

{
  "scripts": {
    "test": "mocha test --compilers js:babel-core/register"
  }
}

power-assert

espower-babel と一緒にインストールします。

npm install --save-dev power-assert espower-babel

テストコードを用意します。

test.js

import assert from 'power-assert';

class Message {
  getValue() {
    return 'Hello World'
  }
}

describe('Hello espower-babel', () => {
  it('should return "Hello World"', () => {
    let msg = new Message();

    assert('Hello World' === msg.getValue());
  });
});

テストコードを実行してみましょう。コードは test ディレクトリにあることを想定します。

mocha --compilers js:espower-babel/guess test

ESLint

インストール

コマンドツールをインストールします。

npm install -g eslint

console.log、alert を使う

デフォルトでは console.log、alert の利用は無効になっています。コメントで無効にしてみましょう。

app.js

/* eslint-disable no-alert, no-console */

console.log('Hello');

コマンドを実行してエラーが表示されないことを確認してみましょう。

eslint app.js

package.json に　rules を追加することもできます。

package.json

{
  "eslintConfig": {
    "rules": {
      "no-console": 0
    }
  }
}