2016/09/28

もうgulpやwebpackで消耗しない！vue-cliを使ったVue.js開発

フロントエンド界隈の闇といえば、開発をはじめる前に周辺ツールで消耗すること。
以下の記事を見ていただくと、わかるかと思う。
1年半ほど前に書いた記事だ。
フロントエンド初心者だった私が、Vue.js（0.12）を使ってTypeScriptでChrome拡張機能を開発しようとしたとき、本題の「Vue.js」を触るまでに以下のツールを学ばなければならなかった。

npm: nodeのパッケージ管理ツール
bower: フロントエンド系のライブラリ管理ツール
tsd: TypeScriptの型情報管理ツール
gulp: タスクランナー（ビルドやテスト自動化のため）
webpack: モジュールバンドラー（ファイルを1つにまとめ依存解決するため）
ts-loader: TypeScriptをwebpackでビルドするときに使うプラグイン
Jasmine: テストツール（BDD）
mocha+chai: テストツール+アサーション

初心者だったので、すべてイチから使い方を覚えなければならず、周辺ツール疲れになってしまい、開発をはじめるまでにずいぶん時間がかかったことを思い出す。
しかも、1年後にはbowerとtsdはオワコンになり、別のツールが登場していた。
こんなことで消耗するのはツラすぎる！

そんなときにオススメなのが「vue-cli」
いろいろ用意してくれるScaffoldingツールだ。

vue-cliをインストールする

node.js、npmをまだインストールしていない場合は、はじめてのTypeScript開発環境構築を参考にインストールする。

次に、グローバル環境にvue-cliをインストールする。

$ npm install -g vue-cli

プロジェクトフォルダ（足場）を作成する

まず公開されているvue-cliのテンプレートを検索する。

$ vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  browserify-simple-2.0 - A minimal Vue 2.0 Browserify + `vueify` setup for quick prototyping.
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  simple-2.0 - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
  ★  webpack-simple-2.0 - A minimal Vue 2.0 setup for quick prototyping with Wepback & vue-loader

今回は、これらのテンプレートの中から「webpack」を使用する。
テンプレートはGitHubで公開されており、browserifyよりwebpackの方がstarが多いので、流行りにのってｗ

カレントディレクトリにプロジェクトフォルダが作成されるので、適当なフォルダを作って移動。

$ mkdir dev
$ cd dev

「 vue init <template-name> <project-name>」形式でコマンドを実行し、プロジェクトフォルダを作成する。

$ vue init webpack vue-cli-sample

? Project（プロジェクト名は？）
? Project description（プロジェクトの詳細説明は？）
? Author（作成者は？）
? Use ESLint to lint your code?（ESLint使う？）
? Pick an ESLint preset（ESLintのプリセット何にする？ Standard or AirBNB or 自作）
? Setup unit tests with Karma + Mocha?（ユニットテストする？）
? Setup e2e tests with Nightwatch?（E2Eテストする？）

vue initを実行すると、「プロジェクト名はどうする？」など聞かれる。

わからなければ、すべてEnterで問題ない。

すべてが終わるとカレントディレクトリに「vue-cli-sample（自分で決めた名前）」というフォルダが作成される。
そのディレクトリ構成は、以下のとおり。

.
├── README.md
├── build
│   ├── build.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── Hello.vue
│   └── main.js
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │       └── test.js
    └── unit
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── Hello.spec.js

すべて説明すると長くなってしまうので、一部だけ。
srcディレクトリ内で、vue.jsの開発を行う。
testディレクトリには、e2eやunitのテストツールがある。specsディレクトリ内のファイルにテストを書くことになる。
あとは設定用のスクリプトなどだ。

必要なパッケージをインストールする

さきほどのプロジェクトフォルダ内に、package.jsonがあるので、それをインストールする。
※量があるので、十分時間を確保してください。（といっても10分もあれば大丈夫）

$ cd vue-cli-sample
$ npm install

動作を確認する

ローカル環境で確認する

$ npm run dev

> vue-cli-sample@1.0.0 dev /Users/bc_rikko/dev/vue-cli-sample
> node build/dev-server.js

Listening at http://localhost:8080

http://localhost:8080にブラウザなどでアクセスすると、「Hello World」と表示される。

リリース用にビルドする

$ npm run build

以下のようなディレクトリ構成で、distフォルダに各種ビルド済みファイルが格納される。
あとは、dist配下をWebサーバに置けば完了！

./dist
├── index.html
└── static
    ├── css
    │   ├── app.05188654ba44b3a0751a76ea1c62363e.css
    │   └── app.05188654ba44b3a0751a76ea1c62363e.css.map
    └── js
        ├── app.f536652dc2c37097291a.js
        ├── app.f536652dc2c37097291a.js.map
        ├── manifest.3245611cb2b19bcf1966.js
        ├── manifest.3245611cb2b19bcf1966.js.map
        ├── vendor.88a10a27e34001f79a95.js
        └── vendor.88a10a27e34001f79a95.js.map

ユニットテスト + E2Eテストをする

ユニットテストは、各モジュールごとに行う最小のテスト。
E2Eは「End to End」、つまりシステム全体が正常に動いているか確認するためのテスト。

# ユニットテスト
$ npm run unit

# E2Eテスト
$ npm run e2e

# ユニットテスト+E2Eテスト
$ npm run test

Lintで静的コードチェック

コーディングを静的にチェックするために、Lint（ESLint）を実行する。

$ npm run lint

さいごに

右も左も分からないフロントエンドのなかで、必死に周辺ツールの使い方を覚えていた時期が懐かしく思えるほど、便利なツールだ。

今回はvue-cliの説明だけだったが、実際の開発方法については、後日書く予定。

参考サイト

以上

written by @bc_rikko