ES2015の開発環境 ES5への変換と単体テスト : JavaScript

Pocket

しばらく触らないと忘れてしまうのでES2015の開発環境をメモします。主に(1) ES2015をES5へ変換、(2)テスト環境構築について記載しています。

ディレクトリ構造

下記のディレクトリを前提として記載します。

project
    |
    |-- dist
        |
        |-- scripts.js
        |
        |-- scripts.min.js
    |
    |-- docs
    |
    |-- examples
        |
        |-- index.html
    |
    |-- src
        |
        |-- main.es2015.js
        |
        |-- Example.es2015.js
    |
    |-- package.json

トランスパイラ ES2015からES5へ変換

パッケージ 内容
Babel ES5へ変換。
babelify 内部でBabelを使用しES2015をES5へ変換するとともにexport/importをrequireへ変換します。
requireからファイルの結合はしません。その部分はbrowserifyが担当します。
browserify requireを解決しファイルを結合します。
watchify browserifyにファイル監視機能がついたもの。

Babelで始める!モダンJavaScript開発 | HTML5Experts.jp

Npmでパッケージインストール

$ /path/to/project
$ npm install babelify watchify browserify babel-preset-es2015 --save-dev

.babelrc作成

{
  "presets": [
    "es2015"
  ]
}

【node.js】es6での開発で最低限必要な設定メモ〜npm・bower・gulp・grunt・browserify 色々あるけど。。。 – とりあえずphpとか

NPM script

ES2015をES5へ変換

package.josn

}
 .....
 "scripts": {
    .....
    "compile": "browserify ./src/main.js -t babelify --outfile ./dist/scripts.js",
    ...
  },
  ...
}

変換

$ cd /path/to/project
$ npm run compile

ファイルを監視してES2015をES5へ変換

watchifyを使用しファイルを監視し変更があるたびにES5へ変換します。

package.json

}
 .....
 "scripts": {
    .....
    "watch": "watchify -v -t babelify src/main.js -o dist/scripts.js",
    .....
  },
  ...
}

監視・変換

cd /path/to/project
$ npm run watch

配布用スクリプト(scripts.min.js)を作成

npm run buildはbrowserifyでdist/script.jsを作成しuglifyjsでdist/script.min.jsを作成します。
buildコマンドはprebuild -> buildの順で実行されます。

package.json

}
 .....
 "scripts": {
    .....
    "prebuild": "browserify ./src/main.js -t babelify --outfile ./dist/scripts.js",
    "build": "uglifyjs ./dist/scripts.js -o ./dist/scripts.min.js"
  },
  ...
}

ビルド
prebuild -> buildの順で実行します。

cd /path/to/project
$ npm run build

圧縮 uglifyjs

圧縮はuglifyjsを使います。

mishoo/UglifyJS2: JavaScript parser / mangler / compressor / beautifier toolkit

$ npm install uglify-js -g
$ cd /path/to/project
$ uglifyjs ./dist/scripts.js -o ./dist/scripts.min.js

テスト環境

内容 モジュール
アサーション power-assert
テスティングフレームワーク mocha
テスト実行環境 karma(下記では未使用)
$ cd /path/to/project
$ npm install mocha power-assert babel-preset-power-assert babel-register --save-dev

espower-babel から babel-preset-power-assert への移行 – アカベコマイリ

jQueryをテスト

$ cd /path/to/project
$ npm install jquery --save-dev
$ cd /path/to/project
$ sudo npm install jsdom --save-dev
}
  .....
  "scripts": {
    "tests": "mocha --compilers js:babel-register tests/*.test.js",
    .....
  },
  .....
}

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。