npm を知らない人が、Windows 環境に npm を新規導入してみます。
導入環境
- Windows 10 64bit
- Windows コマンドプロンプト (cmd.exe) をある程度使えることを前提とします
概要
npm (Node Package Manager)
- npm は、元々は Node.js というサーバサイド処理を行う JavaScript プログラムの中で利用されるモジュールパッケージの管理ソフトウェアです。
- つまり、Node.js をインストールすれば npm も一緒にインストールされます。
- npm でインストールできるモジュールパッケージは、オンライン上の npm レジストリサービスに登録されています。
- npm レジストリサービスは、Node.jsで使用するものに留まらず、様々な言語や分野のパッケージが豊富に公開されており、世界最大のパッケージレジストリとなっています。
- npm パッケージはソフトウェア開発者にとって有用な物が豊富にあり、システム開発では必須のものとなっています。
- そのため、フロントエンドやバックエンドを問わず「システム開発者は導入しているのが当たり前」という風潮があるのか npm を導入していることを前提にした記事が多くあり、独学で学んでいる初心者に対しては混乱を招いていると思います。
Node.js
- Node.js は元々はサーバーサイドで動作する JavaScript プログラムです。
- その後裾野が広がり、現在ではコマンドラインやデスクトップアプリケーションなどのクライアントサイドプログラムも実行できる JavaScript プログラムの実行環境となっています。
nvm (Node Version Manager)
- Node.js はバージョン間の互換性がありません。今後他バージョンのインストールが必要になった場合に困りますので、Node.js のバージョンを容易に切り替えられる
nvm-windowsを導入し、nvm からNode.js をインストールすることを推奨します。
導入の流れ
- nvm (Node Version Manager) のインストール
- nvm 上で Node.js をインストール
-
npm installコマンドの理解 - npm の設定ファイル (package.json) を作成
1. nvm (Node Version Manager) のインストール
Node.js のバージョンを容易に切り替えられるnvm-windowsを導入します。
こちらの GitHub (coreybutler/nvm-windows) よりnvm-setup.zipをダウンロードし、インストーラーに従いインストールします。
2. nvm 上で Node.js をインストール
インストール可能な Node.js のバージョンを表示します。
nvm list available
表示された一覧の LTS (Long Term Support) の一番上のバージョンをインストールすると良いでしょう。
(本稿ではバージョン14.15.4を選択)
nvm install 14.15.4
次のコマンドでインストールしたバージョンに切り替えます。
nvm use 14.15.4
以上で、npmコマンドを使用することが出来るようになります。
npm -version
6.14.8
3. npm installコマンドの理解
npm でパッケージをインストールするには、npm installコマンドを使います。
パッケージのインストールは、現在 nvm で切り替えている Node.js 環境自体にインストールするグローバルインストールと、カレントディレクトリにインストールするローカルインストールを選択できます。
| コマンド | 内容 |
|---|---|
npm install -g <package>npm install --global <package>
|
<package>をグローバルインストールする。全てのディレクトリからパッケージを実行することができる。 |
npm install <package> |
<package>をローカルインストールする。カレントディレクトリからのみパッケージを実行することができる。 パッケージの依存関係を記載した設定ファイル ( package.json) を事前に作成しておくことで、他PCでも同じパッケージ環境を容易に構築することができる。 |
ポータビリティ性の面からみても、特に事情がない限りローカルインストールが推奨されるようです。
package.jsonを元に環境構築をする場合は、引数なしでnpm installを実行します。
| コマンド | 内容 |
|---|---|
npm install |
カレントディレクトリのpackage.jsonに記載されたパッケージをインストールする。 |
また、パッケージのローカルインストールでは、さらに開発用オプション-Dを付けることができます。
| コマンド | 使い分け |
|---|---|
npm install <package>npm install -S <package>npm install --save <package>
|
開発者オプションなし。プロジェクトのビルドに必須のライブラリをインストールする場合はこちら。package.jsonのdependenciesにパッケージ名が記載される。 |
npm install -D <package>npm install --save-dev <package>
|
開発者オプションあり。コーディングや解析検証など開発時のみに必要なオプショナル的なライブラリをインストールする場合はこちら。package.jsonのdevDependenciesにパッケージ名が記載される。 |
4. npm の設定ファイル (package.json) を作成
パッケージの依存関係を記載する設定ファイルを作成します。
プロジェクトのルートフォルダへ移動した上で npm の設定ファイルを作成します。
cd C:\VSCodeProject
npm init
ルートフォルダにpackage.jsonというファイルが出来ていれば成功です。
[プロジェクトルートフォルダ]
+ ┝ package.json
package.jsonが存在するディレクトリで npm パッケージをローカルインストールするとpackage.jsonにパッケージの依存関係が自動的に記載されていきます。
なお、package.jsonが存在しない状態でパッケージのローカルインストールをした場合、パッケージの依存関係はどこにも記載されません。
5. 完了
以上で npm パッケージをローカルインストールする準備が整い、npm の導入が完了しました。