预设

该 Remix Vite 插件支持 presets 选项，以便于与其他工具和托管提供商集成。

预设只能做两件事

代表您配置 Remix Vite 插件。
验证解析后的配置。

每个预设返回的配置将按照定义的顺序合并。传递给 Remix Vite 插件的任何配置都将最后合并。这意味着用户配置将始终优先于任何预设。

创建预设

预设符合以下 Preset 类型

type Preset = {
  name: string;

  remixConfig?: (args: {
    remixUserConfig: VitePluginConfig;
  }) => RemixConfigPreset | Promise<RemixConfigPreset>;

  remixConfigResolved?: (args: {
    remixConfig: ResolvedVitePluginConfig;
  }) => void | Promise<void>;
};

定义预设配置

作为一个基本的例子，让我们创建一个预设来配置一个服务器捆绑函数

import type { Preset } from "@remix-run/dev";

export function myCoolPreset(): Preset {
  return {
    name: "my-cool-preset",
    remixConfig: () => ({
      serverBundles: ({ branch }) => {
        const isAuthenticatedRoute = branch.some((route) =>
          route.id.split("/").includes("_authenticated")
        );

        return isAuthenticatedRoute
          ? "authenticated"
          : "unauthenticated";
      },
    }),
  };
}

验证配置

务必记住，其他预设和用户配置仍然可以覆盖从您的预设返回的值。

在我们的示例预设中，serverBundles 函数可以用不同的、冲突的实现覆盖。如果我们想要验证最终解析的配置是否包含我们预设中的 serverBundles 函数，我们可以使用 remixConfigResolved 钩子

import type {
  Preset,
  ServerBundlesFunction,
} from "@remix-run/dev";

const serverBundles: ServerBundlesFunction = ({
  branch,
}) => {
  const isAuthenticatedRoute = branch.some((route) =>
    route.id.split("/").includes("_authenticated")
  );

  return isAuthenticatedRoute
    ? "authenticated"
    : "unauthenticated";
};

export function myCoolPreset(): Preset {
  return {
    name: "my-cool-preset",
    remixConfig: () => ({ serverBundles }),
    remixConfigResolved: ({ remixConfig }) => {
      if (remixConfig.serverBundles !== serverBundles) {
        throw new Error("`serverBundles` was overridden!");
      }
    },
  };
}

remixConfigResolved 钩子仅应在合并或覆盖预设配置会导致错误的情况下使用。

使用预设

预设旨在发布到 npm 并用于您的 Vite 配置中。

import { vitePlugin as remix } from "@remix-run/dev";
import { myCoolPreset } from "remix-preset-cool";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      presets: [myCoolPreset()],
    }),
  ],
});