Edited at

Backbone.MarionetteアプリをWebpackでバンドルする

More than 3 years have passed since last update.


Webpack

今まで、Browserlifyを利用していましたが、Webpackに切り替えました。Webpackの方が使い方も簡単で、これからモジュールバンドルを利用される方は、Webpackを使う方がいいのではないでしょうか。

https://webpack.github.io/

なんでも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タスクで行っています。


gulpfile.coffee

gulp.task 'index.html', ->

gulp.src './components/dashboard.jade'
.pipe jade {pretty: true}
.pipe rename 'index.html'
.pipe gulp.dest './public/'

私はどちらの定義ファイルもCoffeeScriptで記述しています。とてもすっきり書けます。


webpackローダ

webpackはローダが充実しているので、以下のような定義で簡単にトランスパイルできます。


webpack.config.coffee

module:

 loaders: [
 { test: /\.coffee$/, loader: 'coffee' }
{ test: /\.jade$/, loader: 'jade' }
]


webpackのエイリアス

underscoreの代わりにlodashを利用します。webpackだとalias定義で、簡単に置換することができます。


webpack.config.coffee

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する必要もなくなります。