预设

¥Presets

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

¥The Remix Vite plugin supports a presets option to ease integration with other tools and hosting providers.

预设只能做两件事：

¥Presets can only do two things:

• 请自行配置 Remix Vite 插件。

  ¥Configure the Remix Vite plugin on your behalf.

• 验证已解析的配置。

  ¥Validate the resolved config.

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

¥The config returned by each preset is merged in the order they were defined. Any config directly passed to the Remix Vite plugin will be merged last. This means that user config will always take precedence over any presets.

创建预设

¥Creating a preset

预设符合以下 Preset 类型：

¥Presets conform to the following Preset type:

type Preset = {
  name: string;

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

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

定义预设配置

¥Defining preset config

作为一个基本示例，让我们创建一个配置 服务器包功能 的预设：

¥As a basic example, let's create a preset that configures a server bundles function:

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

验证配置

¥Validating config

需要记住的是，其他预设和用户配置仍然可以覆盖预设返回的值。

¥It's important to remember that other presets and user config can still override the values returned from your preset.

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

¥In our example preset, the serverBundles function could be overridden with a different, conflicting implementation. If we want to validate that the final resolved config contains the serverBundles function from our preset, we can do this with the remixConfigResolved hook:

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 钩子。

¥The remixConfigResolved hook should only be used in cases where it would be an error to merge or override your preset's config.

使用预设

¥Using a preset

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

¥Presets are designed to be published to npm and used within your Vite config.

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