綺麗に死ぬITエンジニア

Create React AppでパッケージマネージャーにYarnではなくnpmを使用する方法

2019-02-21

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

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

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

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は手動でインストールしなければならず、制限された環境では導入しにくいという問題もあります。

Create React Appでnpmを使用する

さて、本題です。

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

これは、アプリケーション作成時のコマンドに--use-npmオプションを付与することで、パッケージマネージャーをnpmに変更することができます。

具体的には、以下のようにアプリケーションを作成すればいいです。

npx create-react-app my-react-app --use-npm
# or
npm init react-app my-react-app --use-npm
# or
yarn create react-app my-react-app --use-npm

まとめ

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

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