Javascript

[解説] npm install コマンドの解説!

npm installコマンド解説画像

動作環境

今回の環境

  • node: 16.15.0
  • npm: 8.5.5

事前知識

Node.jsとは

Node.jsとはサーバサイドで動く JavaScript のことです。

npmとは

npm(Node Package Manager)は、Node.js のパッケージ(Package)を管理するツールです。パッケージとは、 Node.js で利用できる JavaScript のライブラリやフレームワークなどのことです。例を挙げると、http通信をするaxiosだったり、JavaScriptのフレームワークであるVue.jsのことですね。これらを管理するためにnpm というのを使います。

yarnとは

yarn とは 2016 年にリリースされた npm と互換性のあるパッケージマネージャーのことを言います。今回は、npmのオプションについて触れるので、yarnには触れません。

事前準備

まず、npmを使うためにpackage.jsonを準備します。プロジェクト内でnpmを配置するディレクトリに移動したら、package.jsonを作成する以下のコマンドを入力してください。

>npm init

そうするとターミナルで、以下のようにpackage.json内に記述する、項目の入力を求められますが、全てEnterで大丈夫です。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (src) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /src/package.json:

{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

一番最後の「Is this OK? (yes)」をEnterすると、package.jsonが作成されていると思います。

npm install コマンドについて

ます、パッケージのインストール方法は以下の2つになります。

  • グローバルインストール
  • ローカルインストール

上記2つのインストール方法を紹介していきます。

グローバルインストール

npm install -g パッケージ名
npm install --global パッケージ名 (npm install -gのエイリアス)

グローバルでインストールすると、そのパッケージは、全てのプロジェクト(ディレクトリ)で利用可能になります。

ローカルインストール

npm install パッケージ名

ローカルでインストールすると、そのパッケージは、 インストールした作業ディレクトリで利用可能になります。

npm install (オプションなし)

npm install

まずは、オプションがない場合を見ていきましょう。オプションなしで`npm install`すると、カレントディレクトリにある package.json に記述されている情報を元に、そこに記述されている パッケージを node_modules (インストール先)にインストールします。

このコマンドを使うタイミングとしては、「package.json を共有されて node_modules を作成していない時」や「package.json が更新された時」などになります。例えば、新しくVueやReactのプロジェクトに配属されたときに、環境構築から始めますよね?その際にまずは既存のコードを`git clone`してくるはずです。cloneしてきた中にnode_modulesフォルダはなく、package.jsonがあるはずです。その時に `npm install`コマンドを使います。

インストールするパッケージを開発環境以外でも使用するしたい

npm install パッケージ名
npm install パッケージ名 --save
npm install パッケージ名 --S (--saveのエイリアス)

上記3つのコマンドはどれも同じで、コマンドを打つと、package.jsondependenciesに追加されます。dependenciesに追加されると開発環境以外でも使用するパッケージとして管理されます。例えば、nodeのフレームワークである`express`だったり、http通信する時に使う`axios`とかですね。

上記3つのコマンドはどれも同じと言いましたが、npmのバージョンが4未満の場合は、`--save`をつけなければなりません。npmのバージョンが5以上の場合はデフォルトで`--save`がつくようになってので不要になります。

2022年5月現在、npmの最新バージョンは8.9.0なので、できるだけバージョンを5以上にしときましょう。

インストールするパッケージを開発環境のみで使用したい

npm install パッケージ名 --save-dev
npm install パッケージ名 --D (--save-devのエイリアス)

上記2つのコマンドはどれも同じで、コマンドを打つと、package.jsondevDependenciesに追加されます。devDependenciesに追加されると、開発環境のみで使用するパッケージとして管理されます。`typescript`だったり、`eslint`は開発環境でしか使わないはずなので、`--save-dev`をつけてインストールします。

package.jsonのdependenciesに書かれているパッケージのみインストールしたい

npm install --production

引数なしで`npm install`と打つときに、`--production`というオプションを付けるとpackage.jsonのdependenciesに書かれているパッケージのみをインストールします。そのため、開発環境でしか使わないパッケージを除外できるので、本番環境にデプロイする時に、参照されることのないパッケージをインストールしなくて済むようになります。

バージョンを指定して、パッケージをインストールしたい

npm install パッケージ名@バージョン
(例) npm install vuex@4.0.0

パッケージインストール時に`npm install パッケージ名@バージョン`とすることによって、指定したバージョンでパッケージをインストールします。

まとめ

最後に各コマンドをまとめると以下のようになります。

コマンドどういう時に使うか
npm install・package.json を共有されて node_modules を作成していない時
・package.json が更新された時
npm install --production・本番環境にデプロイする時
(dependenciesに書かれているパッケージのみインストール・開発環境でしか使わないパッケージを除外できる)
npm install -g パッケージ名・グローバルインストール時
・全てのディレクトリィでそのコマンドを使えるようにしたい時
npm install パッケージ名
npm install パッケージ名 --save
npm install パッケージ名 --S
・ローカルインストール時
・そのプロジェクトのディレクトリィだけで使いたい時
・開発環境や、本番環境で使用する時
npm install パッケージ名 --save-dev
npm install パッケージ名 --D
・ローカルインストール時
・そのプロジェクトのディレクトリィだけで使いたい時
・開発環境のみで使用する時

-Javascript
-, ,