Vue.js セットアップメモ
Vue.jsをSails.jsのフロントエンドとしてセットアップしたメモ。
参考にした構成はhackernews。
やりたいこと
- Vue.jsの自動コンパイル(watch)
Sails.jsのアセットコンパイル
Sailsが用意するタスクランナーはGrunt.js。sails lift
した時に勝手にassets/js以下のファイルを.tmp/以下にコピーするようになっている。
- tasks/config/:Gruntタスクの定義
- tasks/register/:定義したGruntタスクを"build"などの親タスクにまとめる
また、assets/js/以下のファイルは勝手にHTMLに差し込まれるようになっている(tasks/pipeline.jsで設定可能)
よって、ビルド前のjsファイルはasset/js/とは別のディレクトリに置きたいので、上のhackernewsの例ではclient/web/というのを作ってそこにVue.jsのソースをおき、ビルドしたファイルをassets/js/build/に出力するようになっている。
webpackでコンパイル
Vue.jsのビルドにはwebpackを使う。
npm install grunt-webpack --save
vue-loader
grunt-webpackがvueをコンパイルするためにvue-loaderを使う。
参考にしたhackernewsではloaderがvueになっていたが、これだと動かなかった。
loaderをvue-loaderにする(https://github.com/vuejs/vue-loader/issues/409)
npm install vue-loader --save
webpackの設定
以下、webpackタスクの設定例です。
outputは.tmp/public/jsに直接吐き出すようにします。(assets/jsに出力したらwatchした時にsyncタスクが走らなくて.tmp/public/js/が更新されなかった)
module.exports = function (grunt) {
grunt.config.set('webpack', {
dev: {
entry: './client/web/main.js',
output: {
path: __dirname + '/../../.tmp/public/js/build',
filename: 'main.js'
},
stats: {
colors: false,
modules: false,
reasons: false
},
progress: false,
failOnError: true,
devtool: '#source-map',
module: {
loaders: [
{test: /\.vue$/, loader: 'vue-loader'}
]
}
}
});
grunt.registerTask('webpack', [
'webpack:dev'
]);
grunt.loadNpmTasks('grunt-webpack');
};
これでも"vue-template-compilerがない!"と怒られる。npmのvue-template-compilerのページにはvue-loaderを使えばこれはいらないよって書いてあるしhackernewsもこれなしで動くのだが・・・
npm install vue-template-compiler --save
npm install css-loader --save
インストールしたら動いた。何か設定がおかしいのか、バージョンアップで仕様が変わっているのか・・・?
compileAssetsタスクに今定義したwebpackタスクを追加。
module.exports = function(grunt) {
grunt.registerTask('compileAssets', [
'webpack:dev',
'clean:dev',
{ 以下略 }
watch
これでビルドはできるようになったけど、Sails.jsはデフォルトでassets/以下しかwatchしてない。
View.jsをいじるたびに毎回サーバー再起動するのは面倒なのでclient/web/以下をwatchして自動でビルドを走らせる。
webpack: {
files: [
'client/web/**/*'
],
tasks: ['webpack']
},