HTML5テクニカルノート

Vue CLI 3入門 06: CLIサービス

Vue CLIサービスは、Vue CLIプロジェクトにインストールされるバイナリです。デフォルトで備わっているコマンドのほか、プラグインが加えるものもあります。本稿は「CLI Service」をもとに、CLIサービスについてご説明します。

01 バイナリを使う

Vue CLIプロジェクトには、@vue/cli-serviceがvue-cli-serviceという名前のバイナリをインストールします。バイナリは、 npmスクリプトではvue-cli-serviceで直ちに参照できます。ターミナルからは、./node_modules/.bin/vue-cli-serviceです。

デフォルトのプリセットでつくられたプロジェクトでは、package.jsonのscriptsでバイナリが確かめられます。

{

	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint"
	},

}

これらのスクリプトは、npmかYarnを用いて呼び出せます。

npm run serve
# OR
yarn serve

npmv5.2.0からnpxが加わりました(「npm 5.2.0の新機能！ 『npx』でローカルパッケージを手軽に実行しよう」参照)。npxからは、つぎのコマンドでバイナリが直接呼び出せます。

npx vue-cli-service serve

GUIでタスクを実行する

vue uiコマンドを使ってGUIを開けば、追加の機能を加えてスクリプトが実行できます。GUIで使える機能は、たとえばWebpackのアナライザーです(図001)。

図001■GUIのプロジェクトタスク

02 vue-cli-service serveコマンド

vue-cli-service serveコマンドは、webpack-dev-serverにもとづいて開発用サーバーを起ち上げます。このサーバーには、Hot Module Replacement(HMR)がただちに働きます。

構文

vue-cli-service serve [options] [entry]

vue-cli-service serveコマンドのオプション

コマンドラインのフラグに加えて、開発サーバーはvue.config.jsのdevServerフィールドを用いて設定することもできます。

03 vue-cli-service buildコマンド

vue-cli-service buildは、プロダクションに対応したビルドをdistディレクトリにつくります。JS/CSS/HTMLは圧縮(minify)し、キャッシュの効果が高まるベンダーチャンクの自動スプリットも行われます。チャンクマニフェストはHTMLにインライン化されます。

構文

vue-cli-service build [options] [entry|pattern]

おもなオプションを、いくつかご紹介しましょう。

アプリケーションをモダンモードでビルドするのが、--modernオプションです。ECMAScript 2015をサポートするモダンブラウザにはネイティブコードで、レガシーバンドルには自動フォールバックします。--targetを使えば、プロジェクトの中のコンポーネントをライブラリやwebコンポーネントとしてビルドできます。詳しくは「Build Targets」をご参照ください。ビルドの統計にもとづいてレポートを出力するのは、--reportと--report-jsonです。バンドルに含まれるモジュールのサイズを分析するのに役立ちます。

その他のオプションも含めて以下にまとめます。

vue-cli-service buildコマンドのオプション

04 vue-cli-service inspectコマンド

vue-cli-service inspectを使うと、Vue CLIプロジェクトの中のwebpackの設定が調べられます。詳しくは、「Inspecting Webpack Config」をご参照ください。

構文

vue-cli-service inspect [options] [...paths]

vue-cli-service inspectコマンドのオプション

05 使えるすべてのコマンドを確かめる

CLIプラグインには、vue-cli-serviceに追加コマンドを差し込むものもあります。たとえば、@vue/cli-plugin-eslintが加えるコマンドはvue-cli-service lintです。挿入されたコマンドは、つぎのようにして確かめることができます。

$ npx vue-cli-service help

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config
    lint      lint and fix source files

  run vue-cli-service help [command] for usage of a specific command.

さらに、各コマンドで使えるオプションは、つぎの構文で調べられます。

npx vue-cli-service help [command]

たとえば、vue-cli-service lintでしたらつぎのとおりです。

$ npx vue-cli-service help lint

  Usage: vue-cli-service lint [options] [...files]

  Options:

    --format [formatter]   specify formatter (default: codeframe)
    --no-fix               do not fix errors
    --max-errors [limit]   specify number of errors to make build failed (default: 0)
    --max-warnings [limit] specify number of warnings to make build failed (default: Infinity)

  For more options, see https://eslint.org/docs/user-guide/command-line-interface#options

06 キャッシュと並列処理

• cache-loader: デフォルトでVueとBabelおよびTypeScriptのコンパイル用に有効になっています。ファイルはnode_modules/.cache内にキャッシュされます。コンパイルに問題が生じたときは、まずこのキャッシュのディレクトリを削除してみてください。
• thread-loader: マシンに複数のCPUコアがあれば、BabelとTypeScriptのトランスパイルで有効になります。

07 Gitフック

@vue/cli-serviceをインストールすると、yorkieも入ります。すると、package.jsonのgitHooksを用いて、Gitフックがつぎのようにして定められます。

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

08 柔軟な設定

vue createを用いてつくったプロジェクトは、とくに設定を加えることなくすぐに動かせます。プラグイン同士も、ほとんどの場合一緒に使える設計です。対話型のプロンプトで必要な機能を選べば済みます。

とはいえ、あらゆる要望をすべて満たすことはできません。また、プロジェクトに求められるものも、ときとともに変わるでしょう。Vue CLIでつくられたプロジェクトは、必要に応じてツールの設定がさまざまに変えられます。詳しくは「Configuration Reference」をお読みください。

Vue CLI 3入門

• Vue CLI 3入門 01: Vue CLIとは
• Vue CLI 3入門 02: インストールする
• Vue CLI 3入門 03: プロトタイプを簡単につくる
• Vue CLI 3入門 04: プロジェクトをつくる
• Vue CLI 3入門 05: プラグインとプリセット
• Vue CLI 3入門 06: CLIサービス

作成者: 野中文雄
作成日: 2018年9月30日