104
77

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-01-12

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は

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

やったね!

104
77
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
104
77

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?