雑にAngularからVueに移行して焦った話

VueにはBuilt-inで日付のフォーマットのフィルターがないので、

moment = require 'moment' 

module.exports = (Vue, options)->
    Vue.filter 'date', (date, format)->
        moment(date).format format

こんな感じでカスタムフィルターを用意しないといけないんだけど、他の部分は全て意図した通り動くのになぜかVue.filterだけ動かない。 小一時間悩んだ挙句、 CoffeeScriptとしてはvalidでも意図したようにJavaScriptが生成されてないことはままあるよなーと、吐き出されたコードを見に行ったら

module.exports = function(Vue, options) {
  return Vue.filter('date', ["date", "format", function(date, format) {
    return moment(date).format(format);
  }]);
}; 

こうなってた。そしてwebbpack.config.js は

module.exports = new function() {
  // snip..
  this.plugins = [
    new webpack.NoErrorsPlugin(),
    new ngAnnotatePlugin({ add: true }),
  // snip..

こうなってた。単純にng-annotate を抜き忘れてただけだった。しかしコイツ、VueでもDIアノテート引っかかるんだなーと逆に感心。

### 教訓 webpack.optimize.CommonsChunkPluginで、npmとかで入れるライブラリ類をvendor.js、自分が書いたものをapp.jsに分けて吐き出してるんだけど、一緒にして一つのファイルで吐いてたらかなり巨大なファイルを見ていくことになったと思うと、結構意味があったなと。そして、生成された実際に実行されるJavaScriptが一番大事であるということを再確認した。