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

4304 ワード
marionette webpack backbone gulp marionette テキストリンク

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

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