Presets

预设

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

预设只能做两件事：

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

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

创建预设

预设符合以下预设类型：

type Preset = {
  name: string;

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

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

定义预设配置

作为一个基本示例，让我们创建一个配置[服务器捆绑功能] server-bundles的预设：

my-cool-preset.ts

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 钩子来执行此操作：

my-cool-preset.ts

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 配置中使用。

vite.config.ts

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()],
    }),
  ],
});