Remix v2の調査

chimame

はじめに

とりあえず、Remix v2がリリースされたので、v1との違いを調べていく

https://remix.run/blog/remix-v2

前提条件

Cloudflare PagesでRemixを使っているのでそれ前提となる

調べる方法

v2で初期インストールしてみる
v1(1.19.3)で作っているアプリケーションとの違いを見てみる

なので、自分が使ってない機能とかの比較が漏れる可能性は大いにある。

chimame

ドキュメントの違い

ドキュメントから結構違う。v1の時にはなかったチュートリアルのメニューなどが追加されてる。

v1
v2

正直初見でパッと見で気になるのはRuntimes, Adapters, Templates and Deployment。Cloudflare Pages(Workers)前提なので、基本的に影響を受けるから。

chimame

初期インストールしてみる

v2でも create-remixは提供されてるので、Remixを初期インストールしてみる

$ npx create-remix@latest

動くには動いたのだが、v1の時はこれ以降は対話型でランタイムとかを選択出来たが、v2になってからそれがなくなった。

出来上がったのは、Node.jsで動作するRemixが作られた。

v1の時と動作が違うのでcliのコードを調べてみるとどうやら、v2からはtemplateオプションを付けないとデフォルトのRemixプロジェクトで作られるコードになっている。

IssueとかPRを漁る時間がないのだが、CLIの開発コストを抑えるのが狙い？ともあれ、Cloudflare PagesなどでRemixを使って初期インストールする場合はテンプレートの指定が絶対に必要となった。

なので、テンプレートを指定して作るとよい。

$ npx create-remix@latest --template https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages

これで、Cloudflare Pagesで動作するRemixの初期インストールが完了。

追記:
教えてもらった。

公式と外部のテンプレートに公平性を持たせるためとか書いてる。

chimame

package.jsonの違い

v1から追加したくらいで、初期インストールしたものをアップデートしてないので、違いはこうなるはず。

もちろんRemixのライブラリは 2.0.0 に上がる。注目すべくはCloudflare Workersの型定義がv4にあがっていること。Remix v1まではv3だったので、最新のCloudflare Workersの機能を使おうとすると型エラーが出て頭を抱えていたが、v4になったことでそれが解消されると思う。

他はReactの型定義やTypeScriptのバージョンなんで特に気にする必要はないかと思う。

chimame