Vue+Webpackの開発がすごい楽ちんだ。（Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分）

Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分（28日公開）

これこれ。

vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

インストール

vue-webpack-boilerplate自体は特にインストール作業はなさそうなんだけど、その前にvue-cliが必要です。

$ npm install -g vue-cli

これでコマンドラインから vue コマンドが使えるようになります。 “vue-cli” はそのコマンドをインストールする的なやつで、ブラウザが読み込む vue.js とは別物。

開始

出力結果は省略してるけど、こんな感じ。

$ vue init webpack my-project
$ cd my-project
$ yarn install

開発サーバー起動。

$ npm run dev

Listening at http://localhost:8080

URLを開くと最初のページが出てきます。やったね。

Ctrl+C で終了。

大丈夫そうなので、今回生成されたファイルを見ていきます。

`build`

ビルド系の処理だろうか。 package.json で "scripts" から呼び出してる。

まあ開発するのにここを覗く必要はなさそう。

`config`

以下の四つ。

dev.env.js
index.js
prod.env.js
test.env.js

index がこれ。（抜粋）

module.exports = {
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }
}

でもって dev がこれ。（全体）

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

でもって build/dev-server なんかで require('../config') して使ってた。

なるほど。

`static`

静的ファイルを置いておくっぽい。

`test`

試験だ。中がさらに e2e, unit に分かれてる。

Vueの試験についてはまた別途じっくりやりたいな。

`index.html`

短い。何もしてない。

後ろの方に  とあって、実際JSファイルの読み込みすらここには書かれていない。へえー。特にいじらなくて大丈夫そう。

`src/main.js`

これもあんまりいじらなさそう。

Vuexを読み込むのに編集した。苦労した。

`src/App.vue`

全体を管轄するやつ。実質main。

vue init 時に何か色々表示するようになってる。もちろんそういうのいらないので、中身は全部書き換える。

`src/components/Hello.vue`

コンポーネントの例っぽい。そっかー components ってディレクトリにまとめるんだーくらいだけ確認して削除しちゃおう。

あ、あと <style scoped> とか。

編集

4日目に作ったTODOリストを移植してみます。

まずさっきの開発用サーバーを起動。

$ npm run dev

これだけで画面が見えるだけでなく、ファイルの監視とビルド、ブラウザ側の画面自動更新までやってくれます。す、すげえ。

ときどき画面が真っ白になるけど。 “Cannot GET /” て何だろなあ。

コンポーネントとかを配置

src/components にコンポーネントのvueファイルを置きます。

storeはどうすんだと思ったけども、 src/store に配置するのが良いようだ。（storeSではない。）

Application Structure · GitBook

小分けにした方が良さそうなんだけど、まだそっちは修練が足りないのでとりあえず全部 src/store/index.js ひとつにまとめる。

あ、Vuexは npm i -S vuex でインストールします。

`App.vue` を差し替え

中身を差し替え。

<template>, <script>, <style> の順序については今回自動生成されたやつに合わせることにした。あとインデントの仕方も。

Vuexをアレする

今まで main.js でこういう風に書いてたんだけど、エラーと言われてしまった。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

というか、これのタイミングで “Cannot GET /” になって画面が出なくなる。その後 git stash とかしても死んだままになる場合もある、ならない場合もある。不思議。

ともかくまあうまくいけばこんなエラーが出る。

Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

えー。

コールスタックを見てもよくわからないんだけど、結果としてはこれをstoreの方へ移動させたらうまくいった。 main.js より先に子ファイルの方が実行されてるみたい。

あと Vue.use(Vuex) は複数回書いてもエラーにならなかったので、 new Vuex.Store() するたびにあちこちのファイルで書いても一応大丈夫そう。実際どうするのが正解なんだろう。

`bootstrap.css` の読み込み

何やら “bootstrap-sass-loader” というのがあってこれを使うと綺麗にやれそうなんだけど、Webpackに慣れてないのでとりあえず現状通り静的ファイルを読み込むことにする。 index.html さん、出番ですよ！

CSSファイルは static/bootstrap.css に配置。適当でいいです。

HTML側は、ちょっと悩んだけどこれが正解だった。

<link rel="stylesheet" href="/static/bootstrap.css" />

/static/* と書くみたいだ。

Handling Static Assets · GitBook

出た

やったぜ。

`assets` と `static`

もっかいこれ。

Handling Static Assets · GitBook

これと、あと試してみた結果、どうやらこんな感じらしい。

src/assets にファイルを置く必要はない
- src 配下ならどこでも何でも
- vueファイルから普通に参照する感覚
Data URL変換されるかどうかはWebpack出力設定による
ファイルとして扱う場合、cache busterとしてfingerprintがファイル名に追加される
リンク先としてassetsを使うには require() する
- ✘ <a href="./assets/zoomed.png">拡大画像</a>
- ✔ <a :href="require('./assets/zoomed.png')">拡大画像</a>
出力先は設定の assetsSubDirectory とかそこら辺で定める
- assets も static も
index.html ではassetsの仕組みは使えない

成果物を公開する

で、開発は良いんだけどこれをどうやって本番環境で公開するのか。なんかどっかに結果を出力するやつでもあるかなーとscriptsを見たら、 build でいけるようでした。

$ npm run build

> [email protected] build /path/to/my-project
> node build/build.js

  Tip:
  Built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

⠹ building for production...

しばらく待つと。

Hash: 39fdb6cebf7f88cf5ca3
Version: webpack 1.14.0
Time: 6181ms
                                                  Asset       Size  Chunks             Chunk Names
             static/js/manifest.949eebf4652254e161dd.js  832 bytes       0  [emitted]  manifest
                  static/js/app.5baa62c1c736021f484a.js    4.44 kB    1, 0  [emitted]  app
               static/js/vendor.cfa50742763ecc49b2a7.js    85.5 kB    2, 0  [emitted]  vendor
    static/css/app.91faa158b1e7cfca4e73b8dca15c2e9a.css  121 bytes    1, 0  [emitted]  app
         static/js/manifest.949eebf4652254e161dd.js.map    8.86 kB       0  [emitted]  manifest
              static/js/app.5baa62c1c736021f484a.js.map    27.6 kB    1, 0  [emitted]  app
static/css/app.91faa158b1e7cfca4e73b8dca15c2e9a.css.map  332 bytes    1, 0  [emitted]  app
           static/js/vendor.cfa50742763ecc49b2a7.js.map     678 kB    2, 0  [emitted]  vendor
                                             index.html  495 bytes          [emitted]

dist というディレクトリができて、その中に index.html をはじめ各ファイルが格納される。これをそのまま持ってけば良いんだな。

ちなみに dist は .gitignore に含まれているので、間違ってリポジトリへ追加してしまう可能性は低いかなと。

出力先を変える

dist じゃなくて例えば gh-pages へ出力するとか。

config/index.js に設定があるので、そこの dist を適当に書き換えれば変わった。あとは .gitignore も併せて更新しとこう。

その他の設定変更

config/index.js の編集でいろいろできそう。

よくわからないこと

`Vue.use(Vuex)` はどう実行するべきか

何度も呼んでも動くみたいだけどこれで良いのか、なんかどっか最初に読み込まれるファイルみたいなのがあってそこで一回だけやるのが良いのか。

Ruby on Railsで動かすにはどうするのか

Vueを使ったクライアント側アプリ、は今回のでできるんだけど、Railsアプリのクライアント側をやりたい、みたいなときはどうするんだろう。

いや今回のはそもそもそういう目的じゃないんだろうけど、ほら便利だからさ。この利便性を残したままRailsと上手にお付き合いする手順とかあるかなーって。それとも落ち着いてRails 5.1に期待かな。

ダミーAPIとか使えるだろうか

先のRailsと一体化した開発とは別に、クライアント側は独立して開発するけど、APIは叩くよ、みたいな場合。

上手に本番と開発で環境を切り替えたりする手法とかあるのかな。

試験

まだ使ってないからわからないけど、最初から仕組みがあるのは助かる。

試しに動かしてみたら “vuex requires a Promise polyfill in this browser.” とか “Check if JAVA is installed on your machine.” とか言われた。

まあ、また今度ね。

おしまい

便利そうでした。

インストール

開始

build

config

static

test

index.html

src/main.js

src/App.vue

src/components/Hello.vue

編集