Webpack
今まで、Browserlifyを利用していましたが、Webpackに切り替えました。Webpackの方が使い方も簡単で、これからモジュールバンドルを利用される方は、Webpackを使う方がいいのではないでしょうか。
なんでもjsへ変換してくれます。
バンドルサンプル
バンドルの例として以下のようなモジュールを利用するWebアプリのバンドル方法を示します。全体はGithubに置いてあります。
https://github.com/notice/backbone-marionette
- backbone
- backbone.marionette
- jade
- lodash
- jquery
Backbone.Marionette
最近では、少し古く感じてしまうBackboneですが、Marionetteの方はv3（現時点最新はv2.4）へ向けて開発が進められています。
v3ではMarionetteのモジュールは廃止されるようです。Marionetteのモジュール管理用クラスだったのですが、今後はAMD/CommonJS/ES6のモジュールを使ってくれということです。
commonJS準拠のモジュール管理をしないときは、非常に便利だったのですが、このサンプルでも先取りして、marionetteのモジュールは使っていません。
テンプレートエンジン
テンプレートエンジンは、jadeを使う想定です。以前はhandlebarsだったのですが、jadeの方が記述量が少ないので好みです。
タスクランナー
タスクランナーはgulpを使っていますが、webpackだけでも十分使えます。
jsのビルドはwebpackのwebpack.configで行って、それ以外はgulpfileでタスクを記述という感じで使い分けています。
このサンプルでは、index.jadeからindex.htmlにトランスパイルするときは、gulpタスクで行っています。
gulp.task 'index.html', ->
gulp.src './components/dashboard.jade'
.pipe jade {pretty: true}
.pipe rename 'index.html'
.pipe gulp.dest './public/'
私はどちらの定義ファイルもCoffeeScriptで記述しています。とてもすっきり書けます。
webpackローダ
webpackはローダが充実しているので、以下のような定義で簡単にトランスパイルできます。
module:
loaders: [
{ test: /\.coffee$/, loader: 'coffee' }
{ test: /\.jade$/, loader: 'jade' }
]
webpackのエイリアス
underscoreの代わりにlodashを利用します。webpackだとalias定義で、簡単に置換することができます。
resolve:
alias:
'underscore': 'lodash'
スクリプト
サンプルはCoffeeScriptで書いています。例としてES6で書いたものも含めています。babelを使ってトランスパイルしています。
ほとんどES6の特徴的な機能は使っておらず、単に置き換えたレベルです。
個人的にはCoffeeScriptが好みですが、主流はES6へという流れでしょうか。node.jsもio.jsとの統合版4.0.0がリリースされましたね。
開発Webサーバ
なお、このサンプルはバンドルを目的としていますので、Webサーバは各自で用意してください。
webpackには、webpack-dev-serverというモジュールがあります。HMR(Hot Module Replacement)という動的にモジュールを入れ替える機能なども実装されています。
reduxを使うときは、HMRが簡単に利用できて便利です。タスクランナーでwatchする必要もなくなります。