「Gatsby開発でYarnを使いたいな...」
今回は上記の悩みにお答えします。
Gatsby開発ではパッケージマネージャーとして、「npm」を使うのがデフォルトです。
しかし、「Yarn」を使いたいときもありますよね？
設定を変えることで、パッケージマネージャーのデフォルトをYarn にできます。
「別にデフォルトにしなくてもいいんじゃない...？」
と思われるかもですが、そうでもありません。
正しい設定をしないとnpmとYarnが混在して、変なエラーが出たりします。
この記事では以下が学べます。
Gatsby開発でYarnを使う場合の設定方法
なんでそんな設定を行う必要があるのか
順に見ていきましょう。
「config.json」を探す
Gatsbyの開発環境を作ると、自動でGatsbyの設定ファイルも作られます。
ファイル名は「config.json」です。
保存場所はMacもWindowsも同じです。
パスは以下となります。
/Users/(username)/.config/gatsby/config.json
上記の「(username)」の部分は、お使いのパソコンによって違います。
また、「.config」は隠しフォルダになっているかもしれません。
隠しフォルダを表示する設定にしておいてください。
Macの場合はショートカットキーで「Shift + command + "."」を押せば、隠しフォルダの「表示」と「非表示」を切り替えられます。
「config.json」を編集する
では「config.json」をエディタで開いてみてください。
"telemetry": {
... 略 ...
},
"cli": {
"packageManager": "npm"
},
"feedback": {
... 略 ...
},
"lastExperimentNotice": {
... 略 ...
}
}全く同じではないかもですが、上記のような内容になっているかと思います。
これを下記のように書き換えます。
"telemetry": {
... 略 ...
},
"cli": {
"packageManager": "yarn"
},
"feedback": {
... 略 ...
},
"lastExperimentNotice": {
... 略 ...
}
}「"packageManager": "npm"」の部分を「"packageManager": "yarn"」に書き換えました。
これで設定完了です。
何が変わったのか以下で解説します。
package-lock.jsonとyarn.lock
例えばパッケージマネージャーとしてnpmを使うとしましょう。
その場合、プロジェクトのルートディレクトリに「package-lock.json」というファイルが自動で作られます。
また、Yarnを使う場合は「yarn.lock」というファイルが自動で作られます。
package-lock.json
yarn.lock
上記の2つは重要なファイルですが、同時に存在してはいけません。
もし同時に存在してしまうと、変なエラーが出てしまって開発に支障が出ます。
どちらか片方だけが存在する状態にするべきです。
Gatsbyでプロジェクトを作るときは「gatsby new」というコマンドを実行します。
デフォルトでは、ルートディレクトリに「package-lock.json」のみが作られます。
そこで、先ほど解説した「config.json」の中で「"packageManager": "yarn"」に書き換えます。
すると、ルートディレクトリに「yarn.lock」のみが作られるわけです。
まとめ
GatsbyでYarnを使う場合に必要な設定を行う手順は以下です。
/Users/(username)/.configの中にある「config.json」を探す
「config.json」をエディタで開く
「"packageManager": "npm"」の部分を「"packageManager": "yarn"」に書き換える
Gatsbyでプロジェクトを作るには「gatsby new」というコマンドを実行します。
デフォルトではルートディレクトリに「package-lock.json」が作られます。
しかし、上記の設定をすれば「package-lock.json」ではなく「yarn.lock」というファイルが作られます。
「package-lock.json」と「yarn.lock」は同時に存在してはいけません。
パッケージマネージャーはnpmを使うのかYarnを使うのか、どちらかに統一しましょう。
というわけで記事は以上です。