預設配置

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 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 Hook 僅應用於合併或覆寫您的預設配置會造成錯誤的情況。

使用預設配置

預設配置旨在發佈到 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()],
    }),
  ],
});