npm パッケージマネージャー入門

npm 入門

npm は Node.js の標準的なパッケージマネージャーです。

2022年9月には、npm レジストリに210万を超えるパッケージがリストアップされていると報告され、地球上で最大の単一言語コードリポジトリとなっています。（ほぼ）すべてのものに対応するパッケージがきっと見つかるでしょう。

元々は Node.js パッケージの依存関係をダウンロードして管理する方法として始まりましたが、その後フロントエンド JavaScript でも使用されるツールになりました。

Yarn や pnpm は npm cli の代替ツールです。こちらもぜひチェックしてみてください。

パッケージ

npm は、プロジェクトの依存関係のダウンロードをインストール、更新、管理します。依存関係とは、Node.js アプリケーションが動作するために必要な、ライブラリやパッケージなどの事前にビルドされたコードのことです。

すべての依存関係をインストールする

プロジェクトに package.json ファイルがある場合、これを実行することで

npm install

プロジェクトが必要とするすべてを node_modules フォルダにインストールします。このフォルダが存在しない場合は作成されます。

単一のパッケージをインストールする

特定のパッケージをインストールするには、次のように実行します

npm install <package-name>

さらに、npm 5 以降、このコマンドは <package-name> を package.json ファイルの dependencies に追加します。バージョン 5 以前は、--save フラグを追加する必要がありました。

このコマンドには、よく次のようなフラグが追加されます

--save-dev はインストールし、エントリーを package.json ファイルの devDependencies に追加します
--no-save はインストールしますが、エントリーを package.json ファイルの dependencies には追加しません
--save-optional はインストールし、エントリーを package.json ファイルの optionalDependencies に追加します
--no-optional は、オプショナルな依存関係のインストールを防ぎます

フラグの短縮形も使用できます

-S: --save
-D: --save-dev
-O: --save-optional

devDependencies と dependencies の違いは、前者はテストライブラリのような開発ツールを含み、後者は本番環境でアプリと一緒にバンドルされる点です。

optionalDependencies の違いは、依存関係のビルドが失敗してもインストールが失敗しない点です。しかし、依存関係がない場合の処理はプログラムの責任です。オプショナルな依存関係についてもっと読む。

パッケージの更新

更新も簡単にでき、これを実行することで

npm update

npm は、バージョニング制約を満たす新しいバージョンがあるか、すべてのパッケージをチェックします。

更新するパッケージを1つ指定することもできます

npm update <package-name>

バージョニング

単純なダウンロードに加えて、npm はバージョニングも管理するため、パッケージの特定のバージョンを指定したり、必要なバージョンよりも高いまたは低いバージョンを要求したりできます。

あるライブラリが、別のライブラリのメジャーリリースとのみ互換性があるということがよくあります。

あるいは、ライブラリの最新リリースにある未修正のバグが問題を引き起こしている場合もあります。

ライブラリのバージョンを明示的に指定することで、チーム全員が同じバージョンのパッケージを使用し続けることができます。これにより、package.json ファイルが更新されるまで、全員が同じバージョンで作業できます。

これらのすべての場合において、バージョニングは非常に役立ち、npm はセマンティックバージョニング（semver）標準に従います。

パッケージの特定のバージョンをインストールするには、次のように実行します

npm install <package-name>@<version>

タスクの実行

package.json ファイルは、以下を使用して実行できるコマンドラインタスクを指定するためのフォーマットをサポートしています

npm run <task-name>

例:

{
  "scripts": {
    "start-dev": "node lib/server-development",
    "start": "node lib/server-production"
  }
}

Webpack を実行するためにこの機能を使用するのは非常に一般的です

{
  "scripts": {
    "watch": "webpack --watch --progress --colors --config webpack.conf.js",
    "dev": "webpack --progress --colors --config webpack.conf.js",
    "prod": "NODE_ENV=production webpack -p --config webpack.conf.js"
  }
}

そのため、忘れやすく打ち間違いやすい長いコマンドを入力する代わりに、次のように実行できます

$ npm run watch
$ npm run dev
$ npm run prod

V8 JavaScript エンジン ECMAScript 2015 (ES6) 以降