vue.js + webpack の紹介(その2) #Vue.js

その1の続きです。
vue.jsは、以下のようにscriptタグで外部jsを読み込むことでも使えます。

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<script src="app.js"></script>

app.js

var app = new Vue({
  el: '#app',
  // 以下略 
});

しかし、基本的にはwebpackやBrowserify、Componentといった "CommonJS modules"に対応したbundleツール？と一緒に使うことが前提となっています。bundleツールを使うことで、上記を以下のように書くことができるようになります(*1)。

index.html

<script src="app.js"></script>

app.js

var Vue = require('vue');

var app = new Vue({
  el: '#app',
  // 以下略
});

vue.min.jsの読み込みが無くなり、代わりにvar app = require('vue');という1行が追加されているのが分かると思います。このインポート用のrequireと、未紹介ですがエクスポート用のmodule.exportsという機能が"CommonJS modules"です。そう、クライアントサイドJSにも、遂にimportやusing的な機能がやって来たのです(*2)！

*1 正確ではありません。実際のindex.htmlではwebpackによって生成されるbundle.jsを読み込むことになります。
*2 RequireJSなんて無かった。

webpackを使った開発の流れ

とても便利なwebpack(require/module.exports)ですが、代償としてビルドが必要になります。具体的な流れを書いたほうがわかりやすいと思うので、例を書きます。

使いたいライブラリをnpmやbowerといったライブラリ管理ツールを使ってインストールする
自分で書いたコードも、モジュール化できるところはmodule.exportsでモジュールとして定義する。vue.jsで言えば、各ComponentやDirectiveは1つ1つ別々のjsファイルで書いて、exportsする。
使いたいモジュールを、使いたい所でrequire('hogehoge')する
webpackコマンドを叩く(ビルドする)
全ての参照関係が解決された、bundle.jsができあがる

bundle.jsの名前は変更できます

webpackのすごいところ

ここまでは、どのbundleツールにもある機能ですがwebpackには更にいい感じの機能が追加されています。

bundle.jsの分割

全てが1つのbundle.jsにまとめられてしまうと、初期表示までが遅くなってしまいます。そこでwebpackでは、以下のようにrequire.ensureを使うことで、

hugahuga.js

require.ensure(['hogehoge'], function(require) {
  var hoge == require('hogehoge');
});

'hogehoge'ライブラリをbundle.jsから分割し、必要になったタイミングで読み込んでもらうことができます。全てwebpackがいい感じにやってくれます。別途定義ファイルに記述するなどの作業は必要ありません。

静的ファイルの読み込み

webpackではjsの他にも、cssやhtml、画像などの静的ファイルもrequire()できます。
詳しくは省略しますが、必要なローダーと呼ばれるもの(たとえばhtml-loaderなど)をnpmでインストールし、webpackのconfigファイルである、webpack.config.jsに、

webpack.config.js

  // ...
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.html$/, loader: "html" }
    ]
  },
  // ...

のような定義を行っておくことで、jsファイル内で

app.js

require('main.css');

Vue.component('im-top-view', {
  template: require('im-top-view.html'),
  // 以下略
});

と書けます。
同じように、必要なローダーとその定義があれば、sassやless, CoffeeScriptやTypeScript(たぶん)を、同じようにrequireすることもできます。requireされた各ファイルは、ビルド時に変換され、bundle.jsとして出力されます。

変更箇所のみのビルド

webpack --watch することで、変更を監視し自動でビルドしてくれます。
またIncremental buildsなため、ビルドが早く気持ちが良いです。

まとめ

私のにわか知識や、色々端折ったためイマイチ不正確な情報ですが、なんとなくvue.jsとwebpackの良さが伝わったら幸いです。公式のサンプル https://github.com/vuejs/vue-webpack-example もあるのでぜひ覗いてみてください。