Help us understand the problem. What is going on with this article?

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

GitHubに怒られる。

alert.png

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

解決したことにする

dismiss.png

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は

https://docs.npmjs.com/files/package-locks

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

no-alert.png

やったね!

enven_omiomi
うんぽこちょ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした