remix.config.js 才相關。當使用 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 填充程式。填充程式由 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 填充程式。
Remix 可以用於在開發中快取內容的目錄路徑，相對於 remix.config.js。預設為 ".cache"。
future 設定可讓您透過 Future Flags 選擇加入未來的重大變更。請參閱 Current Future Flags 部分，以取得所有可用 Future Flags 的清單。
這是一個 globs 陣列（透過 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 欄位時要使用的條件順序。
一個 regex 模式的列表，決定模組是否要進行轉譯並包含在伺服器綁定中。當在 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 填充程式。填充程式由 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 填充程式。
伺服器建置的目標平台，可以是 "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 使用的一些慣例。
