Create React Appで使うパッケージマネージャをnpmに強制する
はじめに
Create React AppではローカルにYarnがインストールされているとデフォルトでパッケージマネージャとしてYarnが使われます。Yarnがローカルにインストールされている状態でnpx crate-react-app my-appとした場合は以下のように表示されYarnで起動するコマンドが促されます。
# Yarnがローカルに存在
$ which yarn
/opt/homebrew/bin/yarn
# Create React Appでアプリを作成
$ npx create-react-app my-app
...
We suggest that you begin by typing:
cd my-app2
yarn start
Happy hacking!
Yarnがローカルにインストールされていない場合はnpmを使用するようになり、プロジェクト生成後にnpm startで開発サーバーを立ち上げることを促されます。
# Yarnがローカルに存在しない
$ which yarn
yarn not found
# Create React Appでアプリを作成
$ npx create-react-app my-app
...
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
Yarnがインストールされている状態でnpxを使用して作成したReactプロジェクトではYarnの利用を想定してYarn.lockが生成されています。npm startでもアプリを立ち上げることは可能ですが、npmの利用を強制するところまでは至りません。
そこでnpmを使用してのパッケージ管理を強制したい場合にできることを紹介します。
オプションでnpmを強制させる
Create react Appには使用するパッケージマネージャをnpmに固定するオプションがあります。
$ npx create-react-app my-app --use-npm
上のように--use-npmというオプションを付けることでYarnがインストールされている状態でもnpmをデフォルトで使用するようにできます。
# Yarnがローカルに存在
$ which yarn
/opt/homebrew/bin/yarn
# npmを強制するオプションをつけて作成
$ npx create-react-app my-app --use-npm
...
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
Yarnがインストールされている環境でもnpmを使用するように設定できました。--use-npmをつけて作成した場合、yarn.lockではなくpackage-lock.jsonがプロジェクト配下に生成されます。
$ cd my-app
# --use-npmをつけて作成した場合の構成
$ ls
node_modules package-lock.json package.json public README.md src
おわりに
YarnはReactの開発元であるMeta社（旧Facebook社）が開発していることもあり、デフォルトでYarnを選択する仕様には納得です。npmを使用したい場合でも公式からオプションが提供されており、npmを使用するケースがあった場合にも柔軟に対応できるのが便利だと感じました。
最後まで読んでいただきありがとうございました。
Discussion