🙌

【npm初心者】なんんとなく使っていた npm install の --save-dev ついて調べてみた

commits2 min read

npm install --save-dev ってどういう意味

npm installnpm install --save-devの違いは、パッケージを本番環境で使うか、開発環境で使うかだけの違いです。

npm install でインストールしたパッケージは、本番環境で使うパッケージとして package.jsondependencies に追加されます。
対して npm install --save-dev は開発環境で使うパッケージとして devDependencies に追加されます。

調べてみると意外と単純でした。

package.json
"dependencies": {
  // npm install コマンドを使ってインストールしたパッケージ
  // 本番環境で使うパッケージ
},
"devDependencies": {
  // npm install --save-dev コマンドを使ってインストールしたパッケージ
  // 開発環境で使うパッケージ
}

Next.js × TypeScript のプロジェクトを例にパッケージがどのよう振り分けられるのか確認してみる

どのパッケージが devDependencies なのかわからないので、考察を入れながら確認してみました。
プロジェクトに必要なパッケージは以下の通り。

  • React
  • Next.js
  • TypeScript

React と Next.js は本番環境で必要なはずなので dependencies に追加されそうです。
TypeScript は JavaScript にコンパイルしなければならないので devDependencies に追加されそうですね。

Next.js のプロジェクトを作成して実際に確認してみる

実際に TypeScript 環境の Next.js のプロジェクトを作成して package.json の中身見て確認してみます。
Next.js の公式に書いてあるコマンドを使って TypeScript プロジェクトを立ち上げてます。

npx create-next-app@latest --ts

https://nextjs.org/docs/basic-features/typescript

package.json の中身は以下のようになりした。

package.json
"dependencies": {
  "next": "12.0.3",
  "react": "17.0.2",
  "react-dom": "17.0.2"
},
"devDependencies": {
  "@types/node": "16.11.6",
  "@types/react": "17.0.34",
  "eslint": "7.32.0",
  "eslint-config-next": "12.0.3",
  "typescript": "4.4.4"
}

やはり、TypeScript は devDependencies に振り分けられていました。
一緒にインストールされていた、JavaScript の構文をチェックをしてくれる ES Lint も devDependencies に振り分けられていました。

--save-dev を使うパッケージの見分け方

私の結論は「公式のインストール方法に従いましょう」です。
npmjs.com でパッケージ名を検索すれば、推奨するインストール方法が記載されているので、それを参考にしています。

https://www.npmjs.com/

初心者のうちは無理せず公式に従った方が無難かもしれません。

おまけ npm install --save は過去

技術系の記事を閲覧していると、npm install --save を使っているのをたまに見かけます。

このコマンドは、npm ver.5 以前に使われていたインストール方法で、dependencies にパッケージを追加したい時に使っていたコマンドなんだとか。
以前は npm install でパッケージをインストールした場合 node_modules ディレクトリにパッケージが追加されるだけだったそうです。

ver. 5 以降は、npm install デフォルトで dependencies にパッケージが追加されうるようになったので、気にする必要はないとのこと。

Thanks

https://k-koh.hatenablog.com/entry/2020/04/07/165203

https://qiita.com/kohecchi/items/092fcbc490a249a2d05c

https://qiita.com/havveFn/items/c5beda8572aa8c1e6be6
GitHubで編集を提案

Discussion

ログインするとコメントできます