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をやるので時間はかかる

人間がチマチマ検証していたのを移譲出来ているので良いのでは

オススメ情報

DEMO

なんかでやります

今後の展望

現在、npm|yarn outdated --json の出力順に結果が依存しているのでなんか上手いこと順番に依存しないようにしたい