npm（Node Package Manager）

使用例

コマンドでパッケージをインストール。

npm install lodash
// 省略できる
npm i lodash

lodashにはオブジェクトを複製する関数が格納されている。

import _ from "lodash";

const original = { prop: { nested: "value" } };
// オブジェクト複製
const cloned = _.cloneDeep(original);
cloned.prop.nested = "new value";

console.log(original, cloned);

lodashのjsファイルをダウンロードしフォルダ内に収めた場合はパスの指定が必要だが、ライブラリとしてインストールした場合パスの指定ではなくライブラリの名前をそのまま記述する。
先頭にパスの記号が付かない場合、パッケージとして取り扱われる。

dependenciesとdevDependenciesの違い

dependencies

本番環境でも利用するパッケージやその依存関係。
ソースコードで使用するパッケージを格納する。

npm install --save パッケージ

devDependencies

テスト環境と開発環境で利用するパッケージやその依存関係。
本番用にビルドするときは含まれない。
開発時に必要なパッケージを格納する（ビルドを行うためのツールやテストを行うためのツール。webpackもこっち）

npm install --save-dev パッケージ
// 省略できる
npm install -D パッケージ

インストールの使い分け

全てのパッケージをインストールする

npm install

dependenciesに書かれているパッケージのみインストールする

npm install --production

便利なコマンド

package.jsonを作成

npm init
// 以下コマンドでデフォルト値が設定されたpackage.jsonを作成できる
npm init -y

最初の設定として、以下の設定をするのがおすすめ。

"type": "module",
"private": true

パッケージのバージョン確認

下記コマンドでバージョンの一覧を見ることができる。

npm view パッケージ名 versions

パッケージの削除

下記コマンドでパッケージの削除ができる。
（package.jsonとnode_module内から消える）

rm パッケージ名

バージョンの先頭の^（キャレット）

{
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

バージョンの先頭に^がある場合、メジャーバージョン4の一番最新のバージョンがインストールされる。
（package.jsonは書き変わらないが、実際は記述したメジャーバージョンの最新のものになっている）

コマンドの登録

登録

{
  "scripts": {
    "hello": "node hello.js"
  }
}

実行

npm run hello

npm test

よくある使用例（live-serverの立ち上げ）

パッケージをインストール。

npm i -D live-server

node_module/.binフォルダにlive-serverファイルが追加される。
これで実際にコマンド上で実行できる状態になっている。

{
  "scripts": {
    "start": "live-server"
  }
}

package.jsonに上記の内容を登録し、以下のコマンドでサーバーを立ち上げることができる。

npm start

{
  "scripts": {
    "start": "live-server index.html --port=8082"
  }
}

npxコマンド

npmをインストールするとnpxコマンドも使用できる。

このコマンドを使用するとnode_module/.binフォルダの中のコマンドを探しにいくので、scriptsに登録せずにパッケージのコマンドを使用する場合はnpxコマンドを使用することになる。

npx live-server

グローバルパッケージの使用

live-serverは便利な機能だが、通常コマンドを使用できる場所（ディレクトリ）は限られる。

PC全体で利用したい場合は、グローバルパッケージを使用する。

npm i -g live-server

上記コマンドでインストールすることで、PC全体で使用できるようになる。

使用する際はnpxも不要で、下記のコマンドで起動できる。

live-server

下記コマンドで、グローバルパッケージがどこにインストールされているか調べることができる。

npm root -g