remix.config.js

remix.config.js 仅在使用经典 Remix 编译器时相关。当使用 Remix Vite 时，此文件不应存在于您的项目中。相反，Remix 配置应在您的Vite 配置中提供给 Remix 插件。

此文件有一些构建和开发配置选项，但实际上不会在您的服务器上运行。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  future: {
    /* any enabled future flags */
  },
  ignoredRouteFiles: ["**/*.css"],
  publicPath: "/build/",
  routes(defineRoutes) {
    return defineRoutes((route) => {
      route("/somewhere/cool/*", "catchall.tsx");
    });
  },
  serverBuildPath: "build/index.js",
};

appDirectory（应用目录）

app 目录的路径，相对于 remix.config.js。默认为 "app"。

// default
exports.appDirectory = "./app";

// custom
exports.appDirectory = "./elsewhere";

assetsBuildDirectory（资源构建目录）

浏览器构建的路径，相对于 remix.config.js。默认为 "public/build"。应该部署到静态托管。

browserNodeBuiltinsPolyfill（浏览器 Node.js 内置模块填充）

要包含在浏览器构建中的 Node.js 填充。填充由 JSPM 提供，并通过 esbuild-plugins-node-modules-polyfill 进行配置。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  browserNodeBuiltinsPolyfill: {
    modules: {
      buffer: true, // Provide a JSPM polyfill
      fs: "empty", // Provide an empty polyfill
    },
    globals: {
      Buffer: true,
    },
  },
};

当使用此选项并以非 Node.js 服务器平台为目标时，您可能还需要通过serverNodeBuiltinsPolyfill为服务器配置 Node.js 填充。

cacheDirectory（缓存目录）

Remix 可以在开发中用于缓存内容的目录路径，相对于 remix.config.js。默认为 ".cache"。

future（未来）

future 配置允许您通过未来标志选择加入未来的重大更改。请参阅当前的未来标志部分，以获取所有可用未来标志的列表。

ignoredRouteFiles（忽略的路由文件）

这是一个 globs 数组（通过minimatch），Remix 将在读取您的 app/routes 目录时将文件与之匹配。如果文件匹配，它将被忽略，而不是被视为路由模块。这对于忽略您希望并置的 CSS/测试文件很有用。

publicPath（公共路径）

带有尾部斜杠的浏览器构建的 URL 前缀。默认为 "/build/"。这是浏览器用来查找资产的路径。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  publicPath: "/assets/",
};

如果您希望从单独的域提供静态资产，您也可以指定绝对路径

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  publicPath: "https://static.example.com/assets/",
};

postcss

如果存在 PostCSS 配置文件，是否使用 PostCSS 处理 CSS。默认为 true。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  postcss: false,
};

routes（路由）

一个用于定义自定义路由的函数，除了那些已经使用 app/routes 中的文件系统约定定义的路由之外。这两组路由将被合并。

exports.routes = async (defineRoutes) => {
  // If you need to do async work, do it before calling `defineRoutes`, we use
  // the call stack of `route` inside to set nesting.

  return defineRoutes((route) => {
    // A common use for this is catchall routes.
    // - The first argument is the React Router path to match against
    // - The second is the relative filename of the route handler
    route("/some/path/*", "catchall.tsx");

    // if you want to nest routes, use the optional callback argument
    route("some/:path", "some/route/file.js", () => {
      // - path is relative to parent path
      // - filenames are still relative to the app directory
      route("relative/path", "some/other/file");
    });
  });
};

server（服务器）

一个服务器入口点，相对于根目录，它将成为您服务器的主要模块。如果指定，Remix 会将此文件与您的应用程序一起编译成一个文件，以部署到您的服务器。此文件可以使用 .js 或 .ts 文件扩展名。

serverBuildPath（服务器构建路径）

服务器构建文件的路径，相对于 remix.config.js。此文件应以 .js 扩展名结尾，并应部署到您的服务器。默认为 "build/index.js"。

serverConditions

在解析服务器依赖项的 package.json 中的 exports 字段时使用的条件顺序。

serverDependenciesToBundle

一个正则表达式模式列表，用于确定是否将模块进行转译并包含在服务器捆绑包中。当在 CJS 构建中使用仅 ESM 的软件包时，或者在使用带有 CSS 副作用导入的软件包时，这非常有用。

例如，unified 生态系统全部是仅 ESM 的。假设我们也在使用 @sindresorhus/slugify，它也是仅 ESM 的。以下是如何在 CJS 应用程序中使用这些软件包而无需使用动态导入的方法：

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverBuildPath: "build/index.js",
  ignoredRouteFiles: ["**/*.css"],
  serverDependenciesToBundle: [
    /^rehype.*/,
    /^remark.*/,
    /^unified.*/,
    "@sindresorhus/slugify",
  ],
};

如果要捆绑所有服务器依赖项，可以将 serverDependenciesToBundle 设置为 "all"。

serverMainFields

在解析服务器依赖项时要使用的主字段的顺序。当 serverModuleFormat 设置为 "cjs" 时，默认为 ["main", "module"]。当 serverModuleFormat 设置为 "esm" 时，默认为 ["module", "main"]。

serverMinify

是否在生产环境中缩小服务器构建。默认为 false。

serverModuleFormat

服务器构建的输出格式，可以是 "cjs" 或 "esm"。默认为 "esm"。

serverNodeBuiltinsPolyfill

当目标是非 Node.js 服务器平台时，要包含在服务器构建中的 Node.js 填充程序。填充程序由 JSPM 提供，并通过 esbuild-plugins-node-modules-polyfill 配置。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverNodeBuiltinsPolyfill: {
    modules: {
      buffer: true, // Provide a JSPM polyfill
      fs: "empty", // Provide an empty polyfill
    },
    globals: {
      Buffer: true,
    },
  },
};

当使用此选项时，您可能还需要通过 browserNodeBuiltinsPolyfill 为浏览器配置 Node.js 填充程序。

serverPlatform

服务器构建的目标平台，可以是 "neutral" 或 "node"。默认为 "node"。

tailwind

如果安装了 tailwindcss，是否支持 CSS 文件中的 Tailwind 函数和指令。默认为 true。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: false,
};

watchPaths

一个数组、字符串或异步函数，用于定义在运行 remix dev 时要监视的相对于项目根目录的自定义目录。这些目录是对 appDirectory 的补充。

exports.watchPaths = async () => {
  return ["./some/path/*"];
};

// also valid
exports.watchPaths = ["./some/path/*"];

文件命名约定

您应该了解 Remix 使用的一些约定。

Dilum Sanjaya 制作了一个很棒的可视化，展示了文件系统中的路由如何映射到应用程序中的 URL，这可能有助于您理解这些约定。