npmとは

npmについて

npmの基本について

npmとは

• JavaScript/Node.js環境における標準的な公式のパッケージ管理ツール
• 世界中の開発者が公開したプログラム（ライブラリ）のインストール、バージョン管理、プロジェクトの依存関係の解決を、コマンド一つで自動化・効率化する機能を提供
• 各プロジェクトのたびにネット上のレジストリからパッケージを毎回ダウンロードして、各プロジェクトのnode_modulesを丸ごと展開（コピー）するため、それぞれが実体になる。

package.json

パッケージを実行するために、package.jsonで実行パッケージを指定する

パッケージのインストール

ローカルインストール

npm install XXXX

ローカルインストールすべきもの

プロジェクト依存のもの（プロジェクトの中で使うもの）

• react
• next
• axios
• eslint
• webpack など

→ プロジェクトごとにバージョンが違うため

ローカルインストールの留意事項と解決策

例えばeslintをローカルインストールするとnode_modules/.bin/eslintに入る＝PATHに入らない。

eslint

を実行しようとしても見つからないため、実行できない。 この場合、

{
  "scripts": {
    "lint": "eslint ."
  }
}

と設定すると、npmが内部でnode_modules/.binをPATHに追加するため、

npm run lint

でローカルのコマンドを実行できる

グローバルインストール

npm install -g XXXX

を実行すると、実行ファイル（コマンド）がPATH配下に配置されるため、以後どこからでも実行できる

例:typescript

npm install -g typescript
tsc

グローバルインストールすべきもの

• Node（node）
• npm
• パッケージマネージャ（pnpm / yarn）
• git
• shell系ツール など

グローバルインストールが微妙なもの

• ESLint
• Prettier
• TypeScript

プロジェクトによって使うバージョンが違う場合があるので、 ローカルにも別途入れておくべし

グローバルインストールのデメリット

• 古くなった時に古いテンプレが生成されてしまう
• 一度しか使わないものはずっと残ってしまう
• グローバルが肥大化する

例:create-react-app

npm install -g create-react-app
create-react-app

→ 一度しか使わないのにずっと残ってしまう

一度しか使わないパッケージの対応

npxを利用。グローバルインストールせずに一時的にインストールして使用後削除

npxとは

• node package executerの略でパッケージの実行ツール
• インストール済みモジュールを実行するだけでなく、未インストールモジュールを実行することもできる（実行後に自動で削除される）

npmとの違い

インストールされてないパッケージでも自動的に探してインストールして実行してインストールしたパッケージの削除をする

npx create-react-app my-app

まとめ

グローバルインストールは最小限にすべき。 また、初期構築時など一度しか使わないものはnpxで対応。 プロジェクトに依存しないnode、npm、tsc、gitなどはグローバルインストール、 プロジェクトに依存するreact、nextなどはローカルインストール