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

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

Remix 更新策略图

全新的脚手架

  • 🚀全新的 CLI 工具,支持 --template/--overwrite 指定模板,也支持了 bun 包管理工具。
sh 复制代码
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

sh 复制代码
npx upgrade-remix 1.19.3

从 v1.19.3 到 v2

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

文件路由格式变化

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

ts 复制代码
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 前缀可以移除,以下是使用示例:
ts 复制代码
import type { MetaFunction } from "@remix-run/node";

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

以优先unknownany并与底层 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 版本中涉及到,如果使用一些非常用功能,需要自己查看文档,同时预祝需要升级的同学,顺利升级!

相关推荐
斌斌_____9 分钟前
Spring Boot 配置文件的加载顺序
java·spring boot·后端
路在脚下@18 分钟前
Spring如何处理循环依赖
java·后端·spring
小马哥编程1 小时前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6661 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
海绵波波1071 小时前
flask后端开发(1):第一个Flask项目
后端·python·flask
web130933203981 小时前
前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案
前端
王小王和他的小伙伴1 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱1 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿1 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
小奏技术2 小时前
RocketMQ结合源码告诉你消息量大为啥不需要手动压缩消息
后端·消息队列