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 install
、npm 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
も更新されます。
変更をリモートリポジトリにプッシュしましょう。
やったね!