React Router 如何编写 Preset 自动配置并校验其他团队的 react-router.config.ts【免费下载链接】react-routerDeclarative routing for React项目地址: https://gitcode.com/GitHub_Trending/re/react-router假设你维护一个平台层工具包多个团队各自维护自己的react-router.config.ts你希望统一强制一部分配置比如按路由划分 server bundle并且防止这些关键配置被项目配置悄悄改掉。React Router framework 模式的配置支持presets选项用于“让与其他工具和托管商的集成更容易”见 Presets 文档、react-router.config.ts 的presets选项。一个 preset 能做且只能做两件事代表用户配置 React Router 的 config 选项校验最终解析出的 config。本文的完整路径是写出 preset 模块 → 在reactRouterConfigResolved钩子里做校验 → 发布为 npm 包 → 其他团队在自己的react-router.config.ts里引入运行 CLI 时自动生效并被校验。准备条件你的项目以及使用 preset 的团队项目运行在 React Router framework 模式下preset 文档与presets配置项都标注为[MODES: framework]。项目devDependencies中包含react-router/devCLI 来源包。preset 的类型从子路径react-router/dev/config导入该入口在 packages/react-router-dev/package.json 的exports中声明为./dist/config.js/./dist/config.d.ts。校验 preset 内部行为时可参考 packages/react-router-dev/config/config.ts 中resolveConfig的实现。第一步编写 preset 模块按 Presets 文档 的基本示例创建my-cool-preset.ts以文档中的serverBundles场景为例import type { Preset } from react-router/dev/config; export function myCoolPreset(): Preset { return { name: my-cool-preset, reactRouterConfig: () ({ serverBundles: ({ branch }) { const isAuthenticatedRoute branch.some((route) route.id.split(/).includes(_authenticated), ); return isAuthenticatedRoute ? authenticated : unauthenticated; }, }), }; }Preset类型在源码 packages/react-router-dev/config/config.ts 中定义三个字段中只有name是必填的name: string——缺少时resolveConfig会直接抛出React Router presets must have a \name property defined.reactRouterConfig?——接收{ reactRouterUserConfig }用户原始配置已被冻结返回要合并进最终配置的对象可以异步reactRouterConfigResolved?——在合并完成后调用接收{ reactRouterConfig }最终解析配置。两个必须知道的合并语义分别来自文档和源码文档说明每个 preset 返回的配置按 preset 定义顺序合并用户配置最后合并用户配置永远优先于所有 preset。源码说明preset 返回的对象在合并前会剔除presets键excludedConfigPresetKeys [presets]即 preset 本身不能再嵌套引入其他 preset。这意味着 preset 的配置是“建议值”而非“锁死值”要锁死就需要下一步的校验钩子。第二步用 reactRouterConfigResolved 校验最终配置如果serverBundles这类函数被用户配置或其他 preset 覆盖成冲突实现而你的 preset 要求必须保持原样就把该函数提到模块作用域在reactRouterConfigResolved钩子里比对并在不一致时抛错以下代码为 Presets 文档 中的完整示例import type { Preset, ServerBundlesFunction, } from react-router/dev/config; 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, reactRouterConfig: () ({ serverBundles }), reactRouterConfigResolved: ({ reactRouterConfig }) { if ( reactRouterConfig.serverBundles ! serverBundles ) { throw new Error(serverBundles was overridden!); } }, }; }两点使用约束文档明确reactRouterConfigResolved只应在“合并或覆盖你的 preset 配置会构成错误”时才使用不要用来做无条件告警。校验发生在所有 preset 与用户配置合并、最终ResolvedReactRouterConfig被deepFreeze之后源码中对每个 preset 依次调用preset.reactRouterConfigResolved?.({ reactRouterConfig })因此你拿到的是最终形态的配置比对结果可信。第三步让其他团队在自己的 react-router.config.ts 中启用Presets 文档 说明 preset 的设计目标是发布到 npm、在 React Router 配置中使用。使用方的react-router.config.ts写法如下react-router-preset-cool是文档中的示例包名替换为你实际发布的包名import type { Config } from react-router/dev/config; import { myCoolPreset } from react-router-preset-cool; export default { // ... presets: [myCoolPreset()], } satisfies Config;注意react-router.config.ts必须提供 default export源码中加载失败会返回${reactRouterConfigFile} must provide a default export或Error loading ${reactRouterConfigFile}: ...这类错误信息便于定位配置写法问题。验证方式在引入了 preset 的 team 项目里运行 React Router CLI来自 react-router/dev CLI 文档配置加载与解析是这些命令的前置动作preset 的合并与校验随之执行react-router dev # 或 react-router build判断标准配置自动生效serverBundles由 preset 注入无需团队在react-router.config.ts中手写可用react-router routes或react-router routes --json查看路由结构确认配置能被正常解析。校验拦截生效若某个团队的配置覆盖了 preset 锁定的serverBundles构建/开发会因钩子抛出的错误失败文档示例中的错误消息为serverBundles was overridden!。需要指定非默认配置文件时dev/build都支持--config、-c参数完整命令与参数列表可用npx react-router/dev -h查看。限制与边界preset 不能改变“用户配置优先”这一合并规则它只能在校验钩子里抛错来强制约束对允许被覆盖的选项如appDirectory、ssr不要加校验。preset 返回的配置中presets键会被剔除无法通过 preset 链式引入其他 preset。文档未给出 preset 的最低react-router/dev版本要求跨团队分发时建议以你所在仓库当前使用的版本为基线统一。进一步细节可参考react-router.config.ts 全部选项、serverBundles 选项、配置解析源码。【免费下载链接】react-routerDeclarative routing for React项目地址: https://gitcode.com/GitHub_Trending/re/react-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考