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",
};
app 目录的路径，相对于 remix.config.js。默认为 "app"。
// default
exports.appDirectory = "./app";
// custom
exports.appDirectory = "./elsewhere";
浏览器构建的路径，相对于 remix.config.js。默认为 "public/build"。应部署到静态托管。
要在浏览器构建中包含的 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 配置允许你通过 未来标志 选择加入未来破坏性更改。请参阅 当前未来标志 部分以获取所有可用未来标志的列表。
这是一个 glob 数组（通过 minimatch），Remix 将在读取你的 app/routes 目录时匹配到这些文件。如果文件匹配，它将被忽略，而不是被视为路由模块。这对于忽略你希望共置的 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 处理 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 副作用导入 的包时很有用。
例如，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"。
在解析服务器依赖项时要使用的主字段顺序。当 serverModuleFormat 设置为 "cjs" 时，默认为 ["main", "module"]。当 serverModuleFormat 设置为 "esm" 时，默认为 ["module", "main"]。
是否在生产环境中压缩服务器构建。默认为 false。
服务器构建的输出格式，可以是 "cjs" 或 "esm"。默认为 "esm"。
在针对非 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。
服务器构建所针对的平台，可以是 "neutral" 或 "node"。默认为 "node"。
如果安装了 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 使用了一些约定，您应该了解。
