【npm初心者】なんんとなく使っていた npm install の --save-dev ついて調べてみた
npm install --save-dev ってどういう意味
npm install と npm install --save-devの違いは、パッケージを本番環境で使うか、開発環境で使うかだけの違いです。
npm install でインストールしたパッケージは、本番環境で使うパッケージとして package.json の dependencies に追加されます。
対して npm install --save-dev は開発環境で使うパッケージとして devDependencies に追加されます。
調べてみると意外と単純でした。
"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
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 でパッケージ名を検索すれば、推奨するインストール方法が記載されているので、それを参考にしています。
初心者のうちは無理せず公式に従った方が無難かもしれません。
おまけ npm install --save は過去
技術系の記事を閲覧していると、npm install --save を使っているのをたまに見かけます。
このコマンドは、npm ver.5 以前に使われていたインストール方法で、dependencies にパッケージを追加したい時に使っていたコマンドなんだとか。
以前は npm install でパッケージをインストールした場合 node_modules ディレクトリにパッケージが追加されるだけだったそうです。
ver. 5 以降は、npm install デフォルトで dependencies にパッケージが追加されうるようになったので、気にする必要はないとのこと。
Thanks
Discussion