ES2015の開発環境構築

ディレクトリ構造

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

トランスパイラ

モジュール 内容
Babel ES5へ変換。
babelify 内部でBabelを使用。export/importをrequireへ変換。
browserify requireを解決しファイルをまとめる。
watchify browserifyにファイル監視機能がついたもの。
[Babelで始める！モダンJavaScript開発 HTML5Experts.jp](https://html5experts.jp/kyo_ago/16979/)

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で実行

npm run watchでファイルを監視し変更があるときはdist/scripts.jsを作成します。 またnpm run buildはbrowserifyでdist/script.jsを作成しuglifyjsでdist/script.min.jsを作成します。 buildコマンドはprebuild -> buildの順で実行します。

package.json

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

実行 監視・変換

cd /path/to/project
$ npm run watch

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

cd /path/to/project
$ npm run build

テスト環境

内容 モジュール
アサーション 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",
    .....
  },
  .....
}

minify

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

$ cd /path/to/project
$ uglifyjs ./dist/scripts.js -o ./dist/scripts.min.js

doumentation

YUIDoc - JavaScript Documentation Tool

$ cd /path/to/project
$ yuidoc -o ./docs ./src

ESLint

ESLint - Pluggable JavaScript linter

$ cd /path/to/project
$ npm install eslint --save-dev