初めに

Node.jsをはじめ，Javasceriptを使用してのWeb開発に欠かせなくなってきているnpmコマンドについての備忘録。

目次

  1. 初めに
  2. npmの概要
    1. npmとは
    2. npmのインストールとpackage.json
    3. node_modules フォルダ
    4. scopeについて
    5. パッケージのバージョン表記
  3. 各コマンドについて
    1. バージョンの取得
    2. 初期化
    3. パッケージインストール
    4. パッケージ情報
    5. パッケージアップデート
    6. パッケージアンインストール
    7. パッケージ検索
    8. パッケージの詳細情報
    9. パッケージのバージョン
    10. タスク実行

npmの概要

npmとは

npmとは「Node Package Manager」の略で，その名の通りNode.jsのモジュールを管理するツール。
JavaScriptでのWebアプリの開発には，Node.js及びnpmモジュールが多く使われるようになっている。
その為，npmコマンドを叩くことが基本の「き」のような状況。

npmのインストールとpackage.json

npmのインストールは，Node.jsをインストールすれば，自動的にインストールされる。
各モジュールは，必要に応じてpackage.jsonで管理していくことになる。
依存関係のモジュールも一括インストールしてくれるので便利。

node_modules フォルダ

カレントディレクトリ配下にあり、カレントディレクトリにインストールされるモジュールの中身が配置されるフォルダ。
エラー等に悩んだら，フォルダを一端削除してインストールし直すと良いかもしれない。

scopeについて

scopeとは,パッケージ名の前につける@から/までの名前空間の事。@以降にnpmのユーザーアカウント名もしくは組織名が入ります。
これによってパッケージ名が重複しても，別のモジュールとして認識される。

パッケージのバージョン表記

パッケージのバージョンは主に三つの数字で表される。
意味は，前から・・・

  • Major Release：仕様そのものの変更。upgradeする場合はアプリケーションの改修が必要になる可能性あり。
  • Minor Release：仕様を維持した状態での機能追加。upgradeしてもアプリケーションは壊れない。
  • Patch Release：バグ修正。upgradeしてもアプリケーションは壊れない。

となる。

各コマンドについて

バージョンの取得

1
npm -v

初期化

ディレクトリにpackage.jsonを作成し，プロジェクトを開始する。
init後にアプリ名やヴァージョンなど幾つか質問されるが，特に設定しなくともよい。
問い合わせが面倒なら「-y」を付けるとよい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
PS D:\Learning\spa> npm init                                                    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 json` 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: (spa)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\Learning\spa\package.json:

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


Is this OK? (yes) yes

パッケージインストール

次のコマンドで，自分の使いたいパッケージを指定する。
package.jsonに記入されると共に，パッケージがダウンロードされる。この時，依存関係にあるパッケージを同時にダウンロードされる。
ダウンロードされたパッケージはnode_modules以下に配置される。

1
2
3
npm install パッケージ名
//もしくは
npm i パッケージ名

既にpackage.jsonに記入がある場合は，次のコマンドを入力する。
package.jsonさえコピーすれば，別の端末で同じ環境を構築することができる。

1
2
3
npm install
//もしくは
npm i

次のオプションを付ける事ができる。

–no-save

package.json に書き込まない場合に指定します。npm4 までは package.json に書き込まないのがデフォルトでしたが、npm5 からは –save がデフォルトとなりました。

–save

依存パッケージの場合に指定します。package.json の dependencies に記録されます。このパッケージを誰かが npm install したときに依存パッケージとしてインストールされます。

–save-optional

依存はするけれど必須ではないパッケージの場合に指定します。package.json の optionalDependencies に記録されます。npm install でインストールされますが、インストールに失敗してもスルーされます。

–save-dev

テストツールなど、開発者が使用するパッケージの場合に指定します。package.json の devDependencies に記録されます。このパッケージを npm install しても、インストールされません。ただし、パッケージを Git から clone して npm install した場合は開発者とみなされ、インストールされます。

パッケージをアンインストールするには次のコマンドを使う。

1
2
3
4
5
6
npm uninstall パッケージ名
npm un パッケージ名
npm unlink パッケージ名
npm remove パッケージ名
npm rm パッケージ名
npm r パッケージ名

上記- -saveオプション等使う事が出来る。

パッケージ情報

インストール済みのパッケージ一覧を表示する。

1
2
3
4
npm list
npm ls
npm la
npm ll

依存関係のパッケージを省いた一覧は次のオプションを付ける。(自分がインストールしたパッケージのみ)

1
npm list --depth=0

パッケージアップデート

使用しているパッケージに更新されているか確認する。

1
npm outdated

パッケージをアップデートする。

1
npm update パッケージ

パッケージ名を省略するとpackage.jsonに記入された全てのパッケージをアップデートする。

1
npm update

パッケージアンインストール

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

1
npm uninstall パッケージ

パッケージ検索

キーワードに関連するパッケージを npm リポジトリから検索します

1
npm search キーワード

パッケージの詳細情報

1
2
3
npm info パッケージ
npm view パッケージ
npm show パッケージ

パッケージのバージョン

1
2
npm info パッケージ version  // 最新バージョンを表示
npm info パッケージ versions  // インストール可能なバージョン一欄を表示

タスク実行

タスクはpackage.jsonのscript:に記述します。

npmタスク
1
2
3
4
5
{
  "scripts": {
    "build": "browserify src/main.js > build/bundle.js"
  }
}

此方は，少し複雑なので項を改め纏めます。