likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 10

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

Remix 更新策略图

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

全新的脚手架

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

  • 🚀全新的 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_MetaArgsMetaArgs
V2_MetaDescriptorMetaDescriptor
V2_MetaFunctionMetaFunction
V2_MetaMatchMetaMatch
V2_MetaMatchesMetaMatches
V2_ServerRuntimeMetaArgsServerRuntimeMetaArgs
V2_ServerRuntimeMetaDescriptorServerRuntimeMetaDescriptor
V2_ServerRuntimeMetaFunctionServerRuntimeMetaFunction
V2_ServerRuntimeMetaMatchServerRuntimeMetaMatch
V2_ServerRuntimeMetaMatchesServerRuntimeMetaMatches
  • 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 版本中涉及到，如果使用一些非常用功能，需要自己查看文档，同时预祝需要升级的同学，顺利升级！