🍚

remixを関連パッケージごとアップデートする、upgrade-remixが便利！

2024/01/13に公開

Remix

tech

はじめに

Remix の最新バージョンがリリースされたときに、関連するパッケージもバージョンを上げないといけなくて面倒くさくなりませんか？

私はなります！🙋‍♂️

そんな時に便利なupgrade-remixを紹介します。

これを使うと、Remix とそれに関連するパッケージをまとめてアップグレードしてくれます。

`upgrade-remix`の開発者

Github は以下です。

npm のページは以下です。

Contributors に Matt Brophy と Logan McAnsh の 2 名がいらっしゃるのですが、両者とも Shopify で Remix の開発に携わられているようです。

なので Remix の発展に合わせて今後も更新されていきそうですね！

`upgrade-remix`でアップグレードする

最近 Remix の v2.5.0 がリリースされたので、実際にアップグレードしていきます！

まずバージョンを確認します。

以下のコマンドで、Current、Wanted、Latest を確認できます。

npm outdated

@remix-run 関係のパッケージのアップグレードがあります。

Package                   Current   Wanted   Latest  Location
@remix-run/css-bundle       2.4.1    2.4.1    2.5.0  node_modules/@remix-run/css-bundle
@remix-run/dev              2.4.1    2.4.1    2.5.0  node_modules/@remix-run/dev
@remix-run/eslint-config    2.4.1    2.4.1    2.5.0  node_modules/@remix-run/eslint-config
@remix-run/node             2.4.1    2.4.1    2.5.0  node_modules/@remix-run/node
@remix-run/react            2.4.1    2.4.1    2.5.0  node_modules/@remix-run/react
@remix-run/serve            2.4.1    2.4.1    2.5.0  node_modules/@remix-run/serve
tailwindcss                 3.4.0    3.4.1    3.4.1  node_modules/tailwindcss

npx upgrade-remixでアップグレードする

コマンドを実行して関連パッケージをアップグレードします。
デフォルトでは Latest のバージョンにアップグレードされます。
実行すると、npm ciが実行されます。
```
npx upgrade-remix
```
特定のバージョンにアップグレードするには、以下のようにバージョンを指定します。
```
npx upgrade-remix 1.16.0
npx upgrade-remix pre
```

アップグレードされているか確認

以下のコマンドを実行します。

npm outdated

remix が表示されなくなったので、関係パッケージがアップグレードされました！

Package                Current   Wanted   Latest  Location
tailwindcss              3.4.0    3.4.1    3.4.1  node_modules/tailwindcss

package.jsonも確認すると、remix 関連パッケージがアップグレードされています。

{
  "dependencies": {
    "@remix-run/css-bundle": "2.5.0",
    "@remix-run/node": "2.5.0",
    "@remix-run/react": "2.5.0",
    "@remix-run/serve": "2.5.0"
  },
  "devDependencies": {
    "@remix-run/dev": "2.5.0",
    "@remix-run/eslint-config": "2.5.0"
  }
}

おまけ

パッケージの一覧表示

npx upgrade-remix --list-versions
# 短縮表現
npx upgrade-remix -l

パッケージのインストールを行わず、package.jsonとpackage-lock.jsonを更新

npx upgrade-remix --dry-run
# 短縮表現
npx upgrade-remix -d

実行したら以下のように表示されます。

Found package-lock.json, using npm
SKIPPING package updates due to --dry-run"
detected package.json file: /workspaces/FOLDER_NAME/package.json
SKIPPING install command due to --dry-run:
npm install --save --save-exact @remix-run/css-bundle@latest @remix-run/node@latest @remix-run/react@latest @remix-run/serve@latest
SKIPPING install command due to --dry-run:
npm install --save-dev --save-exact @remix-run/dev@latest @remix-run/eslint-config@latest

最後に

今回は Remix とそれに関連するパッケージをまとめてアップグレードしてくれる便利な CLI であるupgrade-remixを紹介しました。

一つずつアップグレードする必要がなくなるので、依存関係とかを気にしながらアップグレードしなくてよいのでありがたいです！

メジャーバージョンのアップデートの時は気をつける必要がありますが、マイナーバージョン、パッチバージョンのアップグレードをするには簡単になるので助かりますね！

この記事がみなさんの助けになれば嬉しいです！

はじめに

upgrade-remixの開発者

upgrade-remixでアップグレードする

おまけ

最後に

Discussion

`upgrade-remix`の開発者

`upgrade-remix`でアップグレードする