しばらく触らないと忘れてしまうので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
パッケージ | 内容 |
---|---|
Babel | ES5へ変換。 |
babelify | 内部でBabelを使用しES2015をES5へ変換するとともにexport/importをrequireへ変換します。 requireからファイルの結合はしません。その部分はbrowserifyが担当します。 |
browserify | requireを解決しファイルを結合します。 |
watchify | browserifyにファイル監視機能がついたもの。 |
Babelで始める!モダンJavaScript開発 | HTML5Experts.jp
$ /path/to/project
$ npm install babelify watchify browserify babel-preset-es2015 --save-dev
{
"presets": [
"es2015"
]
}
【node.js】es6での開発で最低限必要な設定メモ〜npm・bower・gulp・grunt・browserify 色々あるけど。。。 – とりあえずphpとか
package.josn
}
.....
"scripts": {
.....
"compile": "browserify ./src/main.js -t babelify --outfile ./dist/scripts.js",
...
},
...
}
変換
$ cd /path/to/project
$ npm run compile
watchifyを使用しファイルを監視し変更があるたびにES5へ変換します。
package.json
}
.....
"scripts": {
.....
"watch": "watchify -v -t babelify src/main.js -o dist/scripts.js",
.....
},
...
}
監視・変換
cd /path/to/project
$ npm run watch
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を使います。
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.
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。