対象
Windows系の説明です。Macとほとんど同じです。
パス記号の記載などが違うかもです。
用語
npmとは
node.js のパッケージマネージャーで、モジュールというかパッケージというか JavaScriptの便利ライブラリのインストールをコマンドで行えるもの。
node_modules フォルダ
カレントディレクトリ配下にあり、カレントディレクトリにインストールされるモジュールの中身が配置されるフォルダ。
package.json
カレントディレクトリ配置されるファイル。package.jsonにはインストールするモジュールを記入することができる。
このファイルがあるおかげで、node_modulesの中身はGitなどに登録しなくても開発環境の移行が容易になる。
package-lock.json
カレントディレクトリ配置されるファイル。package.jsonでインストール指定されたモジュールがインストールされるときにそのモジュールが使用している別のモジュールなどの完全なバージョンが記載されているファイル。このファイルは、node_modules の中に入っているモジュールすべてが記載されている。
例えば package.json で、webpackやbabelのインストール指定をすると、package-lock.json には webpack や babel が使用している様々なモジュールがすべて記載されてインストールされる。
package.json は自分でファイルを修正する場合があるが、package-lock.json は自分が手動で編集する機会はほとんどない。
コマンドオプション
npm のコマンドラインオプションには、長いオプション指定を短くするエイリアスが多数あるのでよくわけわからなくなるので併記しておく。
バージョン取得
> npm -v
7.7.6
> npm -version
7.7.6
> npm --version
7.7.6
初期化
カレントディレクトリにpackage.jsonを作成する。
package.jsonにはインストールするモジュールを記入したりできる。
> npm init
このコマンドを入力するとプロジェクト名やバージョンなどを聞かれるので答えていくとpackage.jsonが作成される。
質問項目される項目は次のとおり
package name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
全てEnterを押して次の項目に進むことができる。package name には、その時のカレントディレクトリの名前が入る。
最後にこの内容で書き込んでよいか、と聞かれるので、yを入力する。
About to write to C:\...\package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) y
>
Enter や y の入力がめんどくさいので、次のコマンドでは問い合わせなしに、package.json を作成することができる。
> npm init -y
> npm init -yes
パッケージインストール
package.json の内容に従ってインストールするには次のコマンドを使う。これはすでにpackage.json の中身にインストールするべきパッケージ名が書かれている場合に使うので環境移行のときに使うコマンド。
> npm install
> npm i
ただし、このコマンドでは、package.json と package-lock.json を上書きしてしまいフォーマットが崩れたりあるいは、何らかの理由(node や npm のバージョンが移行環境で異なっている場合など)でpackage-lock.json が更新され、node_modules フォルダ内のモジュールが完全一致しないことがある。
なので、package.json と package-lock.json を更新せずにnode_module を完全復帰させたい場合は、Clean Install を行うほうがより安全。コマンドは次のとおり。
> npm ci
次のコマンドは、カレントディレクトリに指定のパッケージをインストールする。カレントフォルダの配下のnode_modulesフォルダに配置される。
> npm install パッケージ名
> npm i パッケージ名
コマンドがインストールされる場合はnode_modules\.bin\ に配置されるので、カレントディレクトリからは次のように指定することでローカルのコマンドが呼び出せる。
> .\node_modules\.bin\コマンド
次のコマンドでは、カレントディレクトリに指定のパッケージをインストールするときに package.json の dependencies欄 にパッケージ名が記録される。
> npm install --save パッケージ名
> npm install -save パッケージ名
> npm install -S パッケージ名
以前のバージョンの npm では、この save オプションをつけなければ dependencies欄に記入されなかったのですが、現在の npm ではこのオプションがなくてもdependencies欄に記入されるようになったので、このオプション指定は不要のはず。
次のコマンドでは、カレントディレクトリに指定のパッケージをインストールするときに package.json の devDependencies欄 にパッケージ名が記録される。
> npm install --save-dev パッケージ名
> npm install -D パッケージ名
devDependencies 欄は開発専用のパッケージなので、Webpack や Babel など、自分が作成しているプログラムのリリースに含めないモジュールはこちらにインストールする。lodash などは、devDependencies欄ではなく、dependencies欄にいれる。
パッケージインストール グローバル
次のコマンドでは、グローバルにパッケージをインストールする。コマンドをインストールした場合はパスを指定しなくてもどのディレクトリでも動くようになる。
実際にどこに配置されているかはよくわからない。よくわからなくても使えるから大丈夫。
> npm install -g パッケージ名
> npm install --global パッケージ名
グローバルインストールの場合には、--saveオプションは無効になる。
パッケージアンインストール
次のコマンドでは、カレントディレクトリにインストールしたパッケージをアンインストールする。
> npm uninstall パッケージ名
> npm un パッケージ名
> npm unlink パッケージ名
> npm remove パッケージ名
> npm rm パッケージ名
> npm r パッケージ名
次のコマンドでは、アンインストール時に package.json の dependencies欄の記述も削除する。
> npm uninstall --save パッケージ名
同様に、次のコマンドでは、アンインストール時に package.json の devDependencies欄の記述も削除する。
> npm uninstall --save-dev パッケージ名
> npm uninstall -D パッケージ名
パッケージアンインストール グローバル
次のコマンドでは、グローバルインストールしたパッケージをアンインストールすることができる。
> npm uninstall -g パッケージ名
パッケージインストールリスト
次のコマンドでは、カレントディレクトリにインストールされているモジュールの一覧を出力することができる。
> npm list
次のコマンドでは、グローバルインストールされているモジュール一覧を出力することができる。
> npm list -g
参考
勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点) - Qiita
https://qiita.com/msakamoto_sf/items/a1ae46979a42d6948ebd
npmのuninstallコマンドを忘れがちなのでメモ - Qiita
https://qiita.com/mamo/items/6f1cf71ccd82216fe25b
僕がnpm installに-gをつけないわけ - Qiita
https://qiita.com/Mic-U/items/cd456d6bea72937464f8
package-lock.json ってなに？ - Qiita
https://qiita.com/sugurutakahashi12345/items/1f6bb7a372b8263500e5
npm ciを使おう あるいはより速く - Qiita
https://qiita.com/mstssk/items/8759c71f328cab802670
あなたがnpm installをしてはいけない時 - Minimal Blog
https://blog.minimalcorp.com/users/jigen/posts/6f325dc9b8a00370b6aedf47a34cb3ce