🎉Remix 发布 v2 正式版版本，确定不来尝试一下吗？

🎉🎉🎉本文关注常用的功能，如果你是 v1.19.3 用户，升级策略应该早已知晓，剩余的一些小的更改需要配合调试。

Remix 更新策略图

全新的脚手架

• 🚀全新的 CLI 工具，支持 --template/--overwrite 指定模板，也支持了 bun 包管理工具。

npx create-remix@latest # 使用最新的 cli 初始化项目

🚧注意：如果你使用的是类似于 taobao 国内的源，由于同步有延迟，@remix-run/css-bundle显示的还是 v1.19.3, 此时切换到 npm 源即可。

主要依赖更新

• 🚀React 更新到 18
• 🚀Node.js 更新到 18+

配置文件 remix.config.js 删除未来的标识符

🚧未来标识符已经是默认行为，升级 v2 后以下可以移除了

功能	描述
v2_dev	新开发服务器，带有 HMR+HDR 功能
v2_errorBoundary	删除 CatchBoundary 以支持单数 ErrorBoundary
v2_headersheaders	改变了嵌套路由场景的逻辑
v2_metameta()	改变了返回格式
v2_normalizeFormMethod	将 formMethodAPI 标准化为大写
v2_routeConvention	路由现在默认使用平面路由约定

从 v1.19.3 过渡

🚧如果你没有升级到最先的 v1.19.3 版本，请先升级到 v1.19.3

npx upgrade-remix 1.19.3

从 v1.19.3 到 v2

1. 🌱升级到 v2 的文章
2. 🌳v2 升级提交记录

文件路由格式变化

🚀🚀🚀扁平风格（在 v1.19.3）中就已经可以用了

routes
├── _auth.login.tsx
├── _auth.logout.tsx
├── _auth.signup.tsx
├── _auth.tsx
├── _public._index.tsx
├── _public.about-us.tsx
├── _public.contact.tsx
├── _public.tsx
├── dashboard._index.tsx
├── dashboard.calendar._index.tsx
├── dashboard.calendar.$day.tsx
├── dashboard.calendar.tsx
├── dashboard.projects.$projectId._index.tsx
├── dashboard.projects.$projectId.collaborators.tsx
├── dashboard.projects.$projectId.edit.tsx
├── dashboard.projects.$projectId.settings.tsx
├── dashboard.projects.$projectId.tasks.$taskId.tsx
├── dashboard.projects.$projectId.tsx
├── dashboard.projects.new.tsx
├── dashboard.projects.tsx
└── dashboard_.projects.$projectId.print.tsx

• _public 表示布局
• projects 表示路由
• $projectId 表示动态路由
• dashboard_ 表示不使用布局的路由

扁平化的路由，对于写代码更加直观了，想必很多人非常喜欢这个特性

TS 类型变化

在 V2 中，移除了 V2_ 的前缀，可以直接使用了。

原名称	新名称
V2_MetaArgs	MetaArgs
V2_MetaDescriptor	MetaDescriptor
V2_MetaFunction	MetaFunction
V2_MetaMatch	MetaMatch
V2_MetaMatches	MetaMatches
V2_ServerRuntimeMetaArgs	ServerRuntimeMetaArgs
V2_ServerRuntimeMetaDescriptor	ServerRuntimeMetaDescriptor
V2_ServerRuntimeMetaFunction	ServerRuntimeMetaFunction
V2_ServerRuntimeMetaMatch	ServerRuntimeMetaMatch
V2_ServerRuntimeMetaMatches	ServerRuntimeMetaMatches

• V2 前缀可以移除，以下是使用示例：

import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

以优先unknown与any并与底层 React Router 类型保持一致

属性	变化
useMatches() 返回类型	从 RouteMatch 改为 UIMatch
LoaderArgs/ActionArgs	重命名为 LoaderFunctionArgs/ActionFunctionArgs
AppData	从 any 更改为 unknown
Location["state"] (useLocation.state)	从 any 更改为 unknown
UIMatch["data"] (useMatches()[i].data)	从 any 更改为 unknown
UIMatch["handle"] (useMatches()[i].handle)	从 { [k: string]: any } 更改为 unknown
Fetcher["data"] (useFetcher().data)	从 any 更改为 unknown
MetaMatch.handle (用于 meta())	从 any 更改为 unknown
AppData/RouteHandle 不再导出	因为它们只是别名为 unknown

fetch api 和 tailwindcss

• 不再默认提供 polyfill, 需要 installGolbal() 来安装。
• 默认启动 tailwindcss 和 postcss， 不需要可以配置关闭。
• ...

端口 PORT

remix-serve现在，如果占用 3000 个端口，则选择一个开放端口

• 如果PORT设置了环境变量，remix-serve将使用该端口
• 否则，remix-serve选择一个开放端口（3000，除非该端口已被占用）

小结

本文主要关注核心更新点 配置文件，类型文件，依赖包版本等，大部分升级功能已经在 v1.19.3 版本中涉及到，如果使用一些非常用功能，需要自己查看文档，同时预祝需要升级的同学，顺利升级！