Remix 1.15.0 变化（为 v2 预准备）

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 样式支持。