Vue CLIでは、デフォルトでパッケージマネージャーにYarnを使用します。

ですが、開発環境や本番環境でのミドルウェアの制限等により、Yarnではなくnpmで管理したいプロジェクトもあるかと思います。

そんなとき、Vue CLIでどのようにプロジェクトを作成すればいいのか、解説します。

npmとは

npm（Node Package Manager）はNode.jsで利用されるパッケージマネージャーで、通常Node.jsをインストールすると一緒にインストールされるデフォルトのパッケージマネージャーです。

Node.jsさえインストールしてしまえばそのまま使えるので、何も考えなければ普通はこちらのパッケージマネージャーを使いますし、多くのライブラリではnpmを使う前提でドキュメントやチュートリアルが書かれています。

Yarnとは

Yarnはnpmに代わるパッケージマネージャーとして発表された後発のパッケージマネージャーで、npmが抱えていた多くの改善点を改善したパッケージマネージャーです。

npmよりもインストール等の処理速度が改善されていたり、セキュアになっていたりします。

参照するリポジトリはnpmのものなので、npmと同じライブラリを同じ名称で同じように利用できます。

package.jsonを使う点もnpmと同様で、比較的簡単にプロジェクトに導入できるので、特に理由がなければYarnを利用することをお勧めします。事実、複数のJavaScriptフレームワークを生成するCLIにおいて、Yarnをデフォルトのパッケージマネージャーとして採用しています。

しかし、npmとは異なり、Yarnは手動でインストールしなければならず、制限された環境では導入しにくいという問題もあります。

Vue CLIでnpmを使用する

さて、本題です。

Vue CLIで新たにVue.jsのプロジェクトを生成する際、デフォルトではパッケージマネージャーにYarnが使用されます。

この設定は、vue configコマンドで変更することができます。

以下のコマンドを実行することで、以降Vue CLIで使用するパッケージマネージャーをnpmに変更できます。

vue config -s packageManager npm

Vue CLIの設定は~/.vuercに記載されています。

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn"
}

先ほどのコマンドは、このpackageManagerの指定をnpmに変更する、というコマンドです。

なので、手動で~/.vuercのpackageManagerの指定をyarnからnpmに変更することでも、設定を変更することができます。

なお、一時的に今回だけパッケージマネージャーをnpmに変更してプロジェクトを作成したい場合は、以下のようにするといいでしょう。

PACKAGE_MANAGER=`vue config -g packageManager`
vue config -s packageManager npm
vue create my-vue-app
vue config -s packageManager $PACKAGE_MANAGER

vue config -g packageManagerで元の設定値を取得し、プロジェクト作成後に元に戻しています。

まとめ

できればYarnを活用して開発することをお勧めしますが、いろんな理由で導入できないなんてことはエンジニアあるあるかと思います。

上記を参考にnpmを使っていきましょう。