npmとは？【フロントエンドパッケージ管理】

概要

・Node Package Managerの略
・フロントエンドで使用するパッケージの管理をする（依存解決、一括インストールなど）
→例えばCSSフレームワークのbootstrap、jsフレームワークのvue.js、
あとはよくあるちょっとしたjsモジュールのシャドーボックスとかスライダーとか
・パッケージ名がNodeだが、Node用のツールというわけではない
・package.jsonに必要なパッケージ、バージョンを記述して管理する
・node_modulesディレクトリ配下に、インストールしたパッケージのソースが配置されていく

※npmの改良版的なツールである【yarn】についても合わせて読むといい
yarnとは？

使い方概要

・npm init
→package.jsonが作られる

・npm install
→package.jsonのdependenciesとdevDependenciesに書かれているパッケージをインストールする
→開発時はこうする

・npm install --production
→package.jsonのdependenciesに書かれているパッケージをインストールする
→本番環境ではこうする

・npm install {パッケージ名}
→そのパッケージがインストールされる
→自分の環境だけで試しにインストールしたいときに使う

・npm install --save {パッケージ名}
→そのパッケージがpackage.jsonのdependenciesに追記される
→本番環境だけで必要なパッケージはこうする

・npm install --save-dev {パッケージ名}
→そのパッケージがpackage.jsonのdevDependenciesに追記される
→開発時のみ必要なパッケージはこうする
→例えばテストツールやデバッグツールなど

開発時の流れ

最初にプロジェクト作成する人

・npm init でpackage.jsonを作成
・npm install --save {パッケージ名}で本番用パッケージをpackage.jsonに追加
・npm install --save-dev {パッケージ名}で開発用パッケージをpackage.jsonに追加
・package.jsonをプッシュして共有

プロジェクトに参加したメンバーたち

・npm intall でみんなと同じパッケージをインストール
※この時、各パッケージはpackage.jsonに記述されているバージョンの範囲内で最新がインストールされるため、
完全にチームメンバーと同一バージョンがインストールされるわけではない
https://qiita.com/sotarok/items/4ebd4cfedab186355867

新しいパッケージを入れるとき

・npm install {パッケージ名} でインストールしてローカルで動作確認
・npm install --save {パッケージ名} でpackage.jsonに追記
・package.jsonをプッシュして共有

その他コマンド

・インストール済みパッケージのバージョン確認
npm list --depth=0

・パッケージの更新
npm update {パッケージ名}
→package.jsonに記載したバージョンの範囲で更新する
→package.jsonに記載の範囲を超えてバージョンアップしたい場合はpackage.jsonを書き換える
→パッケージ名をスペース区切りで複数記述できる
→パッケージ名を省略すると全パッケージを一括更新する

・パッケージのアンインストール
npm uninstall {パッケージ名}
npm uninstall --save {パッケージ名}
npm uninstall --save-dev {パッケージ名}

タスクランナーとして利用

npmのメイン機能はパッケージ管理だが、
タスクランナーとしての機能もある。

package.json の scripts にコマンドを記述。

"scripts": {
    "{呼び出しキーワード}": "{実行されるシェルコマンド}"
}

そして、
npm run {呼び出しキーワード}
のように実行すれば、package.jsに記述したシェルコマンドが実行される。

例えば
babel変換やwebpackのバインド処理など
長くてオプションが複雑なコマンドを、
build のような短いキーワードで登録しておき
npm run build だけで実行できるようにしたりする。

npm自体のインストール方法

※Node.jsをインストールすると、npmも一緒に使えるようになる

windows, macの場合

linux

debian

sudo apt install nodejs
sudo apt install npm

centos

sudo yum install nodejs
sudo yum install npm

docker

https://hub.docker.com/_/node/
node.jsのimageでコンテナ作成

参考

https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea
https://qiita.com/heyheyww/items/092fcbc490a249a2d05c
https://qiita.com/chihiro/items/ca1529f9b3d016af53ec