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が多いので、流行りにのってw

カレントディレクトリにプロジェクトフォルダが作成されるので、適当なフォルダを作って移動。
$ 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

0 件のコメント :

コメントを投稿