サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Vue CLI 3入門 05: プラグインとプリセット


Vue CLIはプラグインで機能が加えられ、設定はプリセットとして保存できます。本稿は「Plugins and Presets」をもとに、Vue CLIのプラグインとプリセットについてご説明します。

01 プラグイン

Vue CLIはプラグインベースのアーキテクチャを採用しています。新たにつくったプロジェクトのpackage.jsonを調べると、devDependenciesに@vue/cli-plugin-で始まる依存が見つかるでしょう。プラグインはwebpackの内部的な設定を変えて、vue-cli-serviceにコマンドを加えます。プロジェクトをつくるときに使う機能の多くは、プラグインで実装されているのです。


"devDependencies": {
	"@vue/cli-plugin-babel": "^3.0.0-rc.5",
	"@vue/cli-plugin-eslint": "^3.0.0-rc.5",
},

プラグインにもとづいて構築されたことで、Vue CLIは柔軟で拡張もしやすくなっています。プラグインの開発については「Plugin Development Guide」をご参照ください。

vue uiコマンド

vue uiコマンドを使うと、GUIを開いてプラグインのインストールや管理ができます。

01-01 既存のプロジェクトにプラグインをインストールする

CLIのプラグインには、ジェネレータ(ファイルを作成)とランタイム(webpackコアの設定とコマンドを追加)が含まれます。vue createコマンドで新たなプロジェクトをつくると、機能の選択にもとづいてプラグインが予めいくつかインストールされます。すでにつくったプロジェクトにプラグインを加えたいときに使うコマンドがvue addです。

つぎのコマンドは、@vue/eslintを完全なパッケージ名@vue/cli-plugin-eslintに解決し、npmからインストールするとともに、ジェネレータを呼び出します。


vue add @vue/eslint



# これまでの使い方でつぎの記述と同じ
vue add @vue/cli-plugin-eslint

vue addコマンドはCLIプラグイン専用

vue addはVue CLIプラグインをインストールするために特別につくられています。通常のnpmパッケージには使えません。npmパッケージをインストールするにはパッケージマネージャをお使いください。

vue addを実行する前に、プロジェクトの現在の状態はコミットしておく方がよいでしょう。このコマンドはプラグインジェネレータを呼び出すので、既存のファイルを書き替えるおそれがあるからです。

接頭辞@vueがなければ、vue addコマンドはスコープのないパッケージに解決されます。たとえば、サードパーティのプラグインvue-cli-plugin-apolloをインストールする場合は、つぎのとおりです。


# vue-cli-plugin-apolloをインストールして呼び出す
vue add apollo

サードパーティのプラグインにスコープを定めて使うこともできます。たとえば、プラグインの名前が@foo/vue-cli-plugin-barであれば、vue addコマンドの入力はつぎのとおりです。


vue add @foo/bar

インストールするプラグインに、ジェネレータオプションも渡せます(プロンプトがスキップできます)。


vue add @vue/eslint --config airbnb --lintOn save

vue-routerとvuexは特別です。これらはプラグインはもっていません。それでも、vue addコマンドで加えられるのです。


vue add router
vue add vuex

プラグインがすでに入っていたら、インストールはされません。そして、ジェネレータだけがvue invokeコマンドで呼び出されます。このコマンドの引数は、vue addと同じです。

プロジェクトのファイルと別の場所にあるpackage.json

何らかの理由で、プラグインをリストしたpackage.jsonファイルがプロジェクトのファイルと別の場所にあるときは、プロジェクトのpackage.jsonのvuePlugins.resolveFromオプションにそのファイルが納められているフォルダのパスを定めてください。

たとえば、ファイルのパスが.config/package.jsonなら、つぎのとおりです。


{
	"vuePlugins": {
		"resolveFrom": ".config"
	}
}

01-02 プロジェクトのローカルプラグイン

プロジェクトのプラグインAPIにアクセスする必要があり、けれども完全なプラグインをつくりたくない場合には、package.jsonファイルのvuePlugins.serviceオプションが使えます。それぞれのファイルのプラグインAPIが使われている関数はexportしなければなりません。そして、その第1引数にプラグインインスタンスを受け取ります。プラグインAPIについて詳しくは「Plugin Development Guide」をご参照ください。


{
	"vuePlugins": {
		"service": ["my-commands.js"]
	}
}

また、vuePlugins.uiオプションを用いて、UIプラグインとして動作するファイルも加えられます。詳しくは「UI Plugin API」をご覧ください。


{
	"vuePlugins": {
		"ui": ["my-ui.js"]
	}
}

02 プリセット

Vue CLIのプリセットは、予めオプションとプラグインの設定が納められたJSONオブジェクトです。新たなプロジェクトはこの定めにしたがってつくられるので、プロンプトから選ばなくてに済みます。

vue createで保存したプリセットは、ユーザーのホームディレクトリ(~/.vuerc)の設定ファイルに保存されます。このファイルを直接編集すれば、プリセットが書き替えられます。つぎはプリセットの例です。


{
	"useConfigFiles": true,
	"router": true,
	"vuex": true,
	"cssPreprocessor": "sass",
	"plugins": {
		"@vue/cli-plugin-babel": {},
		"@vue/cli-plugin-eslint": {
			"config": "airbnb",
			"lintOn": ["save", "commit"]
		}
	}
}

プリセットのデータは、プラグインジェネレータが対応するプロジェクトファイルをつくるために使われます。前掲のフィールドにさらに、統合ツールの設定を加えることもできます。


{
	"useConfigFiles": true,
	"plugins": {...},
	"configs": {
		"vue": {...},
		"postcss": {...},
		"eslintConfig": {...},
		"jest": {...}
	}
}

これらの追加設定は、useConfigFilesの値に応じて、package.jsonや対応する設定ファイルに差し込まれます。たとえば、"useConfigFiles": trueであれば、configs.vueの値がvue.config.jsに差し込まれるのです。

02-01 プラグインバージョンのプリセット

使うプラグインのバージョンを明示して定めることができます。


{
	"plugins": {
		"@vue/cli-plugin-eslint": {
			"version": "^3.0.0",
			// ... プラグインの他のオプション
		}
	}
}

公式のプラグインについては、バージョンの指定は省けます。その場合にCLIが自動的に使うのは、レジストリにある最新のバージョンです。ただし、プリセットにリストされたサードパーティのプラグインは、バージョンの範囲を明示することが推奨されます。

02-02 プラグインのプロンプトを表示する

プラグインはプロジェクトをつくるとき、それぞれのプロンプトが表示できます。けれど、プリセットを使っていると表示されません。Vue CLIが、すべてのプラグインオプションはプリセットにすでに定められているとみなすからです。

場合によっては、プリセットは必要なプラグインにのみ宣言したいこともあるでしょう。そのほかのプラグインについては、ユーザーがプロンプトで選べるようにすれば、柔軟性が増します。

プラグインのプロンプトを表示するには、つぎのようにpluginsオプションに"prompts": trueを加えてください。


{
    "plugins": {
        "@vue/cli-plugin-eslint": {
            // ユーザーにESLintの設定を選ばせる
            "prompts": true
        }
    }
}

02-03 リモートプリセット

プリセットをgitリポジトリに公開すれば、他の開発者と共有できます。リポジトリに含められるのは、つぎのファイルです。

リポジトリが公開されたら、プロジェクトをつくるときに--presetオプションでリモートプリセットが使えます。


# GitHubのリポジトリからプリセットを使う
vue create --preset username/repo my-project

GitLabとBitBucketもサポートされています。プライベートリポジトリから取得する場合には、必ず--cloneオプションを用いてください。


vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

02-04 ローカルファイルシステムプリセット

リモートプリセットを開発するとき、テストのたびにブリセットをリモートリポジトリに繰り返しプッシュするのは面倒です。ワークフローを簡潔にするため、ローカルプリセットが直接扱えます。Vue CLIがローカルプリセットをロードするのは、--presetオプションの値が相対または絶対パス、あるいはパスの最後に拡張子.jsonがつく場合です。


# ./my-presetディレクトリにpreset.jsonが含まれている
vue create --preset ./my-preset my-project
# cwdのJSONファイルを直接使う
vue create --preset my-preset.json

Vue CLI 3入門

作成者: 野中文雄
作成日: 2018年8月29日

Copyright © 2001-2018 Fumio Nonaka.  All rights reserved.