RalaCode

44件の記事があります

GatsbyJSでYarnを使う場合に必要な設定を解説

GatsbyJSでYarnを使う場合に必要な設定を解説
サムライエンジニアプラス

「Gatsby開発でYarnを使いたいな...」

今回は上記の悩みにお答えします。

Gatsby開発ではパッケージマネージャーとして、「npm」を使うのがデフォルトです。
しかし、「Yarn」を使いたいときもありますよね?

設定を変えることで、パッケージマネージャーのデフォルトを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を使うのか、どちらかに統一しましょう。

というわけで記事は以上です。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

【React】onClickでclassNameをつけたり外したりする方法

【React】onClickでclassNameをつけたり外したりする方法

【React】useStateで配列を更新して表示する方法を解説

【React】useStateで配列を更新して表示する方法を解説

【React】styled-componentsの使い方【具体例あり】

【React】styled-componentsの使い方【具体例あり】

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy