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