GitHubに怒られたのでpackage-lock.jsonを見直す


GitHubに怒られる。

npmのpackage-lock.jsonに記載されているパッケージのバージョンが古く、当該バージョンに既知の問題があるようで。

解決したことにする

Dismiss(解決する)ボタンを押すとアラートを消せます

  • A fix has already benn started
    • 修正は既に始まっている
  • No bandwidth to fix this
    • 修正する余力がない
  • Risk is tolerable to hits project
    • プロジェクトを成功させるためには許容できるリスクだぜ
  • This alert is inaccurate or incorrect
    • 何かの間違いだ!
  • Vulnerable code is not actually used
    • 脆弱なコードは実際には使われてないよ

どれも根本的な解決になっていないのでpackage-lock.jsonを詳しく見ていきます。

根本的に解決する

そもそもpackage-lock.jsonは

npm-installを行うとpackage.jsonに記載された依存関係に基づきnode_modulesツリーが生成され、node_modulesディレクトリ下にパッケージ群がインストールされます。同じpackage.jsonは理論上いつでもまったく同じnode_modulesツリーを生成しますが、様々な理由でそのようにはならない場合もあります。このような問題を防ぐためにnpmはpackage-lock.jsonを使用します。

package-lock.jsonにはpackage.jsonよりもより具体的で再現可能なnode-modulesツリーに関する記述がされており、このファイルが存在するなら以降のインストールではpackage.jsonから再度依存関係を計算しなおすのではなく、package-lock.jsonの中身を見てnode_modulesをインストールします。

このファイルはソースリポジトリにコミットされることを意図されており、チーム開発において各メンバー間で完全に同一な環境を構築するのに役立つでしょう。やったね。

package-lock.jsonが変更されるタイミング

package.jsonが存在しpackage-lock.jsonが存在しない場合、npm installを実行するとpackage-lock.jsonが自動で生成されます。
npm installnpm rm(npm uninstall)、npm updateコマンドを実行した場合、package.jsonが実行したコマンドに応じて更新されます。この時--no-saveオプションをつけるとpackage.jsonは更新されません。
前述のコマンドを実行すると、同時にpackage-lock.jsonも同様に更新されます。

オプションに関しては公式ドキュメントを読みましょう
https://docs.npmjs.com/cli/install
https://docs.npmjs.com/cli/uninstall.html
https://docs.npmjs.com/cli/update

package-lock.jsonは直接編集するものではなく、前述のコマンドを実行することで自動的に生成されるものです。
ということでpackage-lock.jsonに記載されたパッケージを更新するためにはpackage.jsonのほうを修正してnpmパッケージを更新すれば問題は解決しそうです。

npm-check-updatesでpackageを更新する

npm updateを実行すればpackage.jsonに記述されている依存関係に基づいてnode_modulesが更新されますが、記述の仕方によっては依存パッケージのメジャーバージョンが上がらず、問題の解決には至らない場合があります。
その場合はpackage.jsonの記述自体を見直しましょう。

npm-check-updatesを使用することで更新可能なパッケージを確認、一括してpackage.jsonの依存パッケージの記述を変更できます。

インストール

$ npm install -g npm-check-updates

パッケージ更新の確認

$ ncu

[..................] / :
 react-scripts             1.1.1  →    2.1.3
 react-redux              ^5.0.5  →   ^6.0.0
 redux                    ^3.5.2  →   ^4.0.1
 eslint                  ^4.18.0  →  ^5.12.0

package.jsonの修正

$ ncu -u

[..................] - :
 react-scripts             1.1.1  →    2.1.3
 react-redux              ^5.0.5  →   ^6.0.0
 redux                    ^3.5.2  →   ^4.0.1
 eslint                  ^4.18.0  →  ^5.12.0

package.jsonが更新されたのでパッケージを更新します。

$ npm install

更新が完了するとpackage-lock.jsonも更新されます。
変更をリモートリポジトリにプッシュしましょう。

やったね!