元営業WEBエンジニアのアプリ開発日記

営業出身のWEB系エンジニアが気になったものから作ってはメモを残してくブログ

npm installとnpm updateの違い。あとnpm ci

概要

仕事でnpm installnpm updateの違いって何やねん。npm ciってなんなんや。ってなったので実験してみた

結論

  • npm install
    • 未インストールのパッケージをインストール
    • 指定より上バージョンのパッケージが存在してもインストールしない
  • npm update
    • 未インストールのパッケージはインストールしない
    • 指定より上バージョンのパッケージが存在すればインストールする
  • npm ci
    • package-lock.jsonに指定された固定バージョンのパッケージをインストール

検証

npm install

$ # バージョン指定でインストール
$ npm install webpack@3.10.0
$ ./node_modules/.bin/webpack -v
3.10.0
$
$ # 3.10.0->3.12.0の上バージョン(webpack)あり
$ # 未インストールのパッケージ(jest)がある状態でinstall
$ git diff package.json
   "devDependencies": {
     "webpack": "^3.10.0",
+    "jest": "^23.6.0"
$
$ npm install
$ ./node_modules/.bin/webpack -v
3.10.0
$ ./node_modules/.bin/jest -v
23.6.0
$ # アップデートされない!けどインストールされてる!

npm update

$ # バージョン指定でインストール
$ npm install webpack@3.10.0
$ ./node_modules/.bin/webpack -v
3.10.0
$
$ # 3.10.0->3.12.0の上バージョン(webpack)あり
$ # 未インストールのパッケージ(jest)がある状態でupdate
$ git diff package.json
   "devDependencies": {
     "webpack": "^3.10.0",
+    "jest": "^23.6.0"
$
$ # --dev付けないとdevDependenciesをupdateしてくれないらしい
$ npm update --dev
$ ./node_modules/.bin/webpack -v
3.12.0
$ ./node_modules/.bin/jest -v
zsh: no such file or directory: ./node_modules/.bin/jest
$ # アップデートされてる!けどインストールはされてない!!

実際の開発イメージ

実際の開発では以下のような流れが良いのかなと思った

  • 使用したいパッケージをインストール
    • npm install [package-name]@[version]
  • パッケージのバージョンアップしたい場合はアップデート
    • npm update [package-name]
  • gitにコミットしてみんなにnpm ciしてねと伝えとく

まとめ

TypeScriptではちょっとしたバージョンの違いでトランスパイルエラーになるケースとかもあったので、npm installで想定より高いバージョン入っちゃうよりは、npm ciで固定のバージョンを取得していくのが適切かなと思った。