npm-safety-updaterのご紹介
こんにちは
https://gyazo.com/422954eb4591d345c7d507cae73748ae
誰
京都大学工学部情報学科6回生
Nota Inc Gyazo開発チーム アルバイト
JavaScript / React / Ruby on Rails / Browser Extension
ビール仕入れ業 / ビールサーバー運用エンジニア
株式会社はてな アルバイト
TypeScript
趣味: ビール🍻
今日のトークテーマ
npmモジュールのバージョンアップをチームでやっていくことについて
npmモジュールのアップデートとの向き合い
フロントエンドで使っている結果としてブラウザを用いた動作確認が大変
そもそもnpmモジュールに詳しくないと影響範囲が分からなくて敬遠されてしまう
詳しい一部の人がnpmモジュールのアップデートを気が向いたときにやって治安をなんとか維持しているという状況
夢と現実
npmモジュールのアップデートは頻繁に行いたい
しかし、ChangeLogの追随や差分検証、動作検証など色々やることがあって億劫
npmモジュールに対するコンテキストを有していないと、どれがどのように作用をするのかもイマイチ当たりがつかない
なので、npmモジュールのアップデートは気合がある人が月1とかにガッとやる羽目になっていて、なかなか横展開できていない
作業が人に依存している
月1くらいだと積まれているモジュールも多いので、なかなかその状態からmajorアップデートもやるぞとはならない
patchやminorアップデートとかをするだけで手一杯になる
達成したいこと
ユーザーに配っているJSの中身が変わったら何はともあれ結局手で確認することからは逃れられない
丁寧なテストやE2Eテストなどでやっていきたいが……
逆に言うと、それに差分が無いときはリリースに載せても問題ないと判断して良さそう
今はここも手で上げてみて差分があるかないかを見ているので、それを自動化出来ると、人間は動作確認が必要だったり、複雑なメジャーバージョンアップに注力できそう
また、buildやテストのプロセスが成功するかどうかもコマンドを叩いてみれば分かるはずなので自動化されたい
$ npx npm-safety-updater
アップデートしたいdepsの種類を指定できる
例えば、devDependencies だけを指定するということが出来ます
アップデートするバージョン差分をpatch,minor,majorから選択できます
patchバージョンアップなら破壊的変更がない細やかな変更だけなので自動化できそうということで対象にするとか出来る
テストコマンドを実行して成功したものだけアップデート
設定ファイルで諸々指定できます
失敗するとpackage.jsonやlockを巻き戻す
npm ciなどのコマンドを使った掃除もやってくれます
設定ファイルの例
code: config.json
{
"prepare": [
"yarn run build",
"mkdir -p /tmp/safety-build",
"cp -f public/dist/{admin,application}.{js,css} /tmp/safety-build"
],
"testCommand": [
"yarn run build",
"diff public/dist/admin.js /tmp/safety-build/admin.js",
"diff public/dist/admin.css /tmp/safety-build/admin.css",
"diff public/dist/application.js /tmp/safety-build/application.js",
"diff public/dist/application.css /tmp/safety-build/application.css"
],
"onlySuccess": [
"cp -f public/dist/{admin,application}.{js,css} /tmp/safety-build",
"git add package.json yarn.lock",
"git commit -m 'update %PACKAGE_NAME% to v%GOTO_VERSION%'"
]
}
実際に使ってみています
1つずつのモジュールをinstall->(build->)test->refreshをやるので時間はかかる
人間がチマチマ検証していたのを移譲出来ているので良いのでは
例えば @types から持ってきているものがpatchバージョンアップで型定義が改善された結果buildに失敗するということにも気づけるので助かっています
オススメ情報
ひとまず npx npm-safety-updater patch,minor --only-dev を実行してみる
DEMO
なんかでやります
今後の展望
現在、npm|yarn outdated --json の出力順に結果が依存しているのでなんか上手いこと順番に依存しないようにしたい