個人のWebサービスで利用しているpackage managerをyarnからnpmに移行したのでメモ📝
移行のモチベーション
以下のようなモチベーションでYarnからnpmへの移行を行うことにしました。特にネイティブで利用できるのが大きいかなと思います。
- npmはネイティブでinstallされてお環境をシンプルに出来る
- Yarnの1系を利用していたがv3系の最新のstableバージョンへの更新が結構大変そう
- ベンチマーク的にもnpmとYarnを比較しても、そこまで遅くはなく許容範囲
resolution等の便利機能に関してもnpmにも互換機能があるため不便することは無さそう
移行手順
今回はYarn v1系からnpm v9系へ移行しました。
関連ライブラリを最新の状態にする
Yarnではyarn.lockに利用中のライブラリのバージョンが記録されますが、npmではpackage-lock.jsonが利用されます。
これにより^を利用してバージョンを指定してたりするとinstall時点でバージョンが解決されてしまう恐があるので依存ライブラリを最新に上げておくことで想定外のバージョンアップによる影響を抑制します。
npmを最新のバージョンに更新
installの前に以下のコマンドでnpmを最新のバージョンに更新しておきます。
$ npm install -g npm
package.jsonの書き換え
npmとYarnではscriptの書き方等が微妙に違うので、そのあたりの修正を行います。
例えばscript内に定義した別のscriptにoptionを追加して呼び出す際にYarnでは単純にoptionを追加して呼び出せば良いですが、
npmの場合は--を付与した上でoptionを追加して呼び出す必要があります。
"build:dev": "vite build --mode development", -- "dev": "yarn build:dev --watch", ++ "dev": "npm run build:dev -- --watch",
Any positional arguments are passed to the specified script. Use -- to pass --prefixed flags and options which would otherwise be parsed by npm.
npm run test -- --grep="pattern"https://docs.npmjs.com/cli/v9/commands/npm-run-script#description
yarn.lock、node_modulesを削除してnpm installする
あとはyarn.lockとnode_modulesを削除してnpm installを実行しpackage-lock.jsonが作成され各種ライブラリがinstallされれば完了です 🎉
