remix.config.js

remix.config.js 仅在使用 Classic Remix 编译器时才相关。使用 Remix Vite 时，此文件不应存在于您的项目中。相反，应在 Vite 配置中向 Remix 插件提供 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",
};

应用程序目录

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

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

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

资产构建目录

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

browserNodeBuiltinsPolyfill

浏览器构建中包含的 Node.js polyfill。polyfill 由 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 polyfill。

缓存目录

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

未来

future 配置可让您通过 Future Flags 选择加入未来的重大变更。请参阅 Current Future Flags 部分以获取所有可用 Future Flags 的列表。

忽略的路由文件

这是 Remix 在读取您的 app/routes 目录时将匹配到文件的 glob 数组（通过 minimatch）。如果文件匹配，它将被忽略，而不是像路由模块一样处理。这对于忽略您希望共置的 CSS / 测试文件很有用。

公共路径

浏览器构建的 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,
};

路由

除了已使用 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");
    });
  });
};

服务器

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

服务器构建路径

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

服务器条件

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

服务器依赖关系

正则表达式模式列表，用于确定模块是否已转译并包含在服务器包中。当在 CJS 构建中使用仅 ESM 的包时，或者在使用带有 CSS 副作用导入的包时，这会很有用。

例如，统一生态系统全部都是 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"。

服务器主要字段

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

服务器最小化

是否在生产中最小化服务器构建。默认为 false。

服务器模块格式

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

serverNodeBuiltinsPolyfill

当针对非 Node.js 服务器平台时，服务器构建中要包含的 Node.js polyfill。polyfill 由 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 polyfill。

服务器平台

服务器构建所针对的平台，可以是中性或节点。默认为节点。

顺风

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

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

观察路径

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

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

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

文件命名约定

您应该了解 Remix 使用的几个约定。

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