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 开发版分支

创建 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 路由，布局路由使用 _ 开始的前缀替代__双下划线开始的前缀路由布局路由。

错误边界处理

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