Remix 自我介绍
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
Remix 1.15.0 公布日期
2023-04-01
更新目录
- 更新文章： 为 v2 预筹备
- 文件系统路由约定
- 元路由发生变化
- 谬误边界发生变化
- 钩子函数： usetransition、useFetcher 属性变量展平
- formMethod 的办法大小写更改
- route 模块的 link/links 产生了变动
- 构建目录命名发生变化
- 服务端构建产生了变动
- 同时在开发服务器中开始UI调用 css 相干库开始反对 css modules, 提取， tailwind 反对， postcss 反对。
remix 开发版分支
- 开发版文档分支
- Github dev 分支
创立 Remix 配置文件变动
/** @type {import('@remix-run/dev').AppConfig} */module.exports = { ignoredRouteFiles: ["**/.*"], // appDirectory: "app", // assetsBuildDirectory: "public/build", // serverBuildPath: "build/index.js", // publicPath: "/build/", future: { v2_errorBoundary: true, v2_meta: true, v2_normalizeFormMethod: true, v2_routeConvention: true, },};future 中更：
| 配置 | 阐明 |
|---|---|
| errorBoundary | 新的谬误边界 |
| meta | 新的 meta 解决形式 |
| normalizeFormMethod | 一般的 Form 办法 |
| routeConvention | 路由转换（新的路由转换） |
路由约定
新版的路由约定，应用 点路由宰割符号 的形式，不在反对文件夹嵌套的模式。index 文件路由改为 _index 路由，布局路由应用 _ 开始的前缀代替__双下划线开始的前缀路由布局路由。
meta
在 v1 中，meta 函数返回对象，然而在 v2 中放回数组。同时对应的类型产生了变动。
谬误边界解决
v2 中只有了 ErrorBoundary 组件，处理错误，同时配合 useRouteError 钩子函数，isRouteErrorResponse 判断谬误。
transition、fetcher
为了更加简略的曾经 submission 字段移除，更加间接的应用 formData/formMethod/formAction/type
import { useNavigation } from "@remix-run/react";function SomeComponent() { let navigation = useNavigation(); navigation.formData; navigation.formMethod; navigation.formAction; navigation.type; navigation.formMethod === "POST";}import { useNavigation } from "@remix-run/react";function SomeComponent() { let fetcher = useTransition(); fetcher.formData; fetcher.formMethod; fetcher.formAction; fetcher.type;}图像地址应用 imageSrcSet/imageSizes
应用小驼峰形式
export const links: V2_LinksFunction = () => { return [ { rel: "preload", as: "image", imageSrcSet: "...", imageSizes: "...", }, ];};构建地址
- 客户端
/** @type {import('@remix-run/dev').AppConfig} */module.exports = { assetsBuildDirectory: "./public/build", // 全新的字段};- 服务端
/** @type {import('@remix-run/dev').AppConfig} */module.exports = { serverBuildDirectory: "./build/index.js", // 构建到新的 index.js 文件};第三方服务器和 css 库的反对
Remix 反对在配置文件中配置对第三方服务器的解决状况：
- arc
- cloudflare-pages
- cloudflare-workers
- deno
- netlify
- node-cjs
- vercel
css 模块
- css module
- 原生提取
- tailwind
- postcss
小结
本次改变并不大，次要针对配置文件，路由书写范式，谬误边界对立解决，钩子函数属性深层次简化，以及 css 款式反对。