【npm】パッケージ管理をしてみよう

2022年2月12日2022年2月12日 souki202

パッケージの管理では、簡単にインストール、アンインストール、更新などが行なえます。

また、package.jsonまたはpackage-lock.jsonがあれば、コマンド1つで記録された全てのパッケージを導入できます。

1 最初にまとめ
2 パッケージを1つ1つ管理
- 2.1 追加(npm install)
- 2.2 削除
3 package-lock.jsonとは
- 3.1 してはならないこと
- 3.2 package-lock.jsonを使ってパッケージ導入
4 脆弱性の検出と修正
5 まとめ

最初にまとめ

それぞれのコマンドはある意味見たままなので、先に一通り紹介します。

# package.jsonを作成
npm init

# パッケージをインストール
npm install axios
# installの略
npm i axios

# パッケージをアンインストール
npm uninstall axios
# uninstallの略
npm un axios

# package.jsonにあるパッケージをすべてインストール
npm install
# 略
npm i

# package-lock.jsonにあるパッケージをすべてインストール
npm ci

# 脆弱性があるパッケー確認
npm audit
# それの修正
npm audit fix

パッケージを1つ1つ管理

追加(npm install)

利用したいパッケージをインストールしてみましょう。ここでは、axiosというパッケージをインストールしてみます。

npm install axios

# または

npm i axios

axiosは、非同期通信を簡単にできるライブラリの1つです。使いやすく、async、awaitするときの理解もしやすく、しばしば利用されます。

実際にインストールすると、このようになります。

新しくnode_modulesというディレクトリと、package-lock.jsonというファイルが生成されました。

node_modulesには、実際にインストールしたファイルが入っています。

そして, package.jsonには、インストールしたパッケージとしてdependenciesが追加されています。

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

axiosが入っていますね。これでインストール完了です!

削除

uninstallします。

npm uninstall axios

# または

npm un axios

package.jsonのパッケージ一覧から消えていればOKです。

package-lock.jsonとは

ここには、実際に導入されたパッケージの詳細情報が入っています。実際に導入というのは、パッケージが依存しているパッケージの情報や、詳細なバージョン情報などが入っているということです。

実務では、Webサービスの環境を更新する際に、ビルドの過程でしばしばパッケージの導入が行われます。この導入時に、動作を検証できていないなどの理由で勝手にアップデートされると困る場合があります。

そのため, 動作が確認できるまでは、環境構築時にいつ何度インストールが行われても同じバージョンを維持する必要があります。それにpackage-lock.jsonが役立ちます。

してはならないこと

基本的にしてはならないことは、

直接編集する
勝手に削除する (チーム開発の場合)
勝手に更新する (チーム開発の場合)
gitの管理外にする (皆が全く同じバージョンを使うため)

package-lock.jsonを使ってパッケージ導入

npm ciを実行するだけです。

しばしば, **ローカル開発環境の初回環境構築や、ビルド時**に使います.

npm iではなくnpm ciするのは、利用するパッケージのバージョンが、メンバー間やサーバ間で差異が生まれるのを防ぐためです。

脆弱性の検出と修正

パッケージに脆弱性が見つかった後、バージョンの更新によって脆弱性が修正される場合があります。

そういったパッケージを調べるには、npm auditを実行します。

$ npm audit
 
...

nanoid  <3.1.31
Severity: moderate
Exposure of Sensitive Information to an Unauthorized Actor in nanoid - https://github.com/advisories/GHSA-qrpm-p2h7-hrv2
fix available via `npm audit fix`
node_modules/nanoid

node-fetch  <2.6.7
Severity: high
node-fetch is vulnerable to Exposure of Sensitive Information to an Unauthorized Actor - https://github.com/advisories/GHSA-r683-j2x4-v87g
fix available via `npm audit fix`
node_modules/node-fetch

18 vulnerabilities (16 moderate, 2 high)

To address all issues, run:
  npm audit fix

意図的に古いバージョンのパッケージを入れているものでnpm auditを実行しました。これを見ると、2つの緊急性の高い脆弱性と、16個のそこそこの緊急性が見つかっていることが分かります。

これを修正する場合、npm audit fixします。

$ npm audit fix

...

# npm audit report

ansi-regex  >2.1.1 <5.0.1
Severity: moderate
 Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw
fix available via `npm audit fix`
node_modules/strip-ansi/node_modules/ansi-regex
  strip-ansi  4.0.0 - 5.2.0

...

10 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

これで、いくつかの脆弱性が修正されました。ただ、依存関係やpackage.jsonでのバージョン指定等によっては、それでも緊急性の高い脆弱性を直せない場合があります。その場合、メッセージに出ている通り、npm audit fix --forceでなんとかなる場合があります。

あるいは、それらのパッケージ1つ1つの依存を確認し、手動で最新版を導入する、といったこともあります。