なんとなく使ってたnpm i について
なぜこの記事を書こうと思ったのか
現場内での実装でテストコードに触れることになりました。
ライブラリが必要になった際に毎回npm iを実行しますが、ここについて何も考えず実行していたなぁと思いまして今回の記事を作成しております。
例えば。npm i時に書く、「-D」とかありますよね。毎回ネット記事から拾ったコピペを貼って実行としてたので、この辺りですね、。
デプロイ環境とローカル環境では必要なライブラリだったりが異なってくるので、早見表的な想定でよく見るものを書いてみたいと思います。
初学者向きの前提
「npm i」 は 「npm install」 の略です
package.json内の、これ。
"dependencies": {
"@reduxjs/toolkit": "^2.2.5",
"axios": "^1.7.2",
"dayjs": "^1.11.11",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.5",
"react-modal": "^3.16.1",
"react-redux": "^9.1.2",
"react-router-dom": "^6.23.1",
"reset-css": "^5.0.2",
"styled-components": "^6.1.11",
"swiper": "^11.1.4",
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.34",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"prettier": "^3.3.1",
"prettier-plugin-organize-imports": "^3.2.4",
"typescript": "^5.4.5",
"vitest": "^2.0.5"
"vite": "^5.2.0"
}
インストール済みのライブラリが一覧で入っていますが、
上段の「"dependencies"」と「"devDependencies"」の違いってなんぞ？と、どういうケースでこう分かれているのか？と。
特に考えてもなかったので知りませんでした。
"dependencies"について
ここには、「デプロイ環境」と「ローカル環境」の両方で使われるライブラリが格納されています。
例えばaxiosとdayjsをインストールする際は
npm install axios dayjs
npm i axios dayjs
npm install axios dayjs --save-prod
↑上記3種類は全て同じ結果
いずれかを、プロジェクト内のターミナルで実行してあげればdependencies側に入ります。
「ユーザーに提供される機能に直接影響するライブラリ」であるということですね。たとえば、reactやaxiosなどのライブラリは、ユーザーがアプリケーションを使用する際に必要となるためdependenciesに含まれます。
"devDependencies"について
ここには「ローカル環境」のみで使われるライブラリが格納されています。(開発時にのみ必要なライブラリ)
例えばcreate-react-appでは環境構築時にデフォルトでインストール済みのテストツールである「jest」。
vite環境でのテストツール「vitest」はデフォルトインストールがされていないため、手動でインストールする必要があります。vitestをインストールするコマンドは以下です。
npm i vitest -D
ここでキーとなるのが、割と参照記事なんかで見かけるこの「-D」です。
ここで知らなかったのですが、初学者向き前提として「npm i は npm install」を書かせていただいたのと同様にこのケースでの「-D」も短縮系なんだということがわかりました。
デプロイの構造なんかがわかるとより理解が深まりそうな気もしますね。
npm i vitest -D
npm install vitest --save-dev
↑2種類どちらで実行しても結果は同じ
感想
Reactのコードを書くことはなんとなく出来ている気がするので、今後はこういうところも焦点を置いて学習していきたいなぁと思います。
ありがとうございました。