パッケージ管理システム
npm（Node Package Manager）とは？
Node.jsで外部パッケージをインストールして使うためのマネージャ。
package.jsonを読み込んで、npmのリポジトリにパッケージを取りに行く。
npmを使うと、依存しているパッケージを一度にインストールできる。
似たようなパッケージ管理システムにyarnがある。
以前はBowerというものが使われていたが、今ではnpm,yarnが一般的。
package.jsonとpackage-lock.json
package.json
自身のパッケージを管理するために使われるファイル
package.jsonは npm init コマンドによって生成される
インストールすべきパッケージのバージョンのの範囲や対応ブラウザのバージョン指定、npm-scriptなどが記入される。
また、package.jsonが存在するディレクトリにnpmを使って新たにパッケージをローカルインストールすると自動的にpackage.jsonの情報が更新される。※グローバルインストールでは記入されない。
devインストールはpackage.jsonにdev-dependenciesと記載される
package-lock.json（lockファイル）
npm installでpackage.jsonに基づいて各種パッケージが実際にインストールされた結果のみが記載されている。
※lockファイルの存在意義
package.jsonではインストールするパッケージの範囲を指定していたが、package-lock.jsonではインストールされたパッケージのバージョンが記述されている。つまり、共同開発にて全く同じパッケージバージョンを使うためにはlockファイルの共有が必要。
Node_modulesとは
package.jsonを元にインストールされた各種パッケージが格納されるディレクトリ先のこと。情報量と変更が膨大になるので、.gitignoreを活用しnode_modulesはgithubにあげない。
package.jsonを共有し、各々のPCでnode_modulesを作成し、環境を整える。
package.jsonを元にインストールする方法が４つあるがそれぞれ目的が異なるので、次回の記事で整理する。
※グローバルインストール、ローカルインストールどちらもPCにパッケージはダウンロードされている。
余談
npxとは
パッケージをダウンロードせずに使用できるコマンド。
一度きり実行したいときによく使う。
Diskの容量を節約できる・グローバル汚染しない、パッケージをダウンロードしていないのでパッケージのバージョン等の管理が必要ない。
ex)未インストールのパッケージにあるコマンドをインストールしないで使える
※npm（バージョン5.2.0以降）をインストールすると、npxはプリインストールされる。
ex)Reactプロジェクトを開始する手順
①npx create-react-app [プロジェクト名]
②cd [プロジェクト名]
③npm start
④ブラウザでhttp://localhost:3000/