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 中更：

路由约好

新版的路由约好，运用 点路由切割符号 的方法，不在支撑文件夹嵌套的模式。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 样式支撑。