开发工具前端构建【免费下载链接】cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址https://gitcode.com/gh_mirrors/cr/craco点击查看免费下载CRACOCreate React App Configuration Override作为 Create React App 的配置覆盖层其核心价值不仅在于通过craco start、craco build、craco test等命令直接改造构建流程还在于对外暴露了一套可编程的Configuration API。本篇文章聚焦于 configuration-api.md 文档所讲解的核心内容如何在第三方工具如独立的 Jest 配置文件、自定义 Webpack 配置文件、编辑器插件、CI 脚本等中直接获取到 CRACO 处理之后的最终 Jest 与 Webpack 配置。读完本文你将掌握createJestConfig、createWebpackDevConfig、createWebpackProdConfig三个 API 的完整签名、参数语义、使用前提与实战写法并理解它们背后的配置加载、上下文构造与合并流程。一、Configuration API 解决什么问题在常规用法中CRACO 通过替换react-scripts的脚本craco start等在进程内部完成配置覆盖。但如果你希望把 CRACO 生成的配置导出给其他工具消费——例如用一份独立的jest.config.js驱动 IDE 的 Jest 集成VS Code、WebStorm 等在 CI 中对生成的 Webpack 配置做二次检查或定制为可视化构建工具、性能分析工具提供真实的构建配置编写自己的脚本复用 CRACO 的合并逻辑而不必重新实现一遍。此时就需要 Configuration API。该 API 目前支持Jest与Webpack两大构建链路二者在 packages/craco/src/index.ts 中作为包的公开导出面暴露export { createJestConfig, createWebpackDevConfig, createWebpackProdConfig, createDevServerConfigProviderProxy, // ... 其他工具函数 };二、JestcreateJestConfig1. 函数签名与参数createJestConfig(cracoConfig, context {}, options { verbose: false, config: null })该函数接收三个参数返回一个完整的 Jest 配置对象类型为JestConfig.InitialOptions参数类型说明cracoConfig对象一份 CRACO 配置即craco.config.js中导出的配置对象context对象可选一个 Jest context 对象包含env、paths以及 CRACO 额外注入的resolve、rootDiroptions对象可选{ verbose?: boolean, config?: string }与 CLI 的--verbose、--config参数对应options中的两个字段与 packages/craco/src/lib/args.ts 中定义的 CLI 参数解析规则一一对应const args: CliArgSpec { verbose: { arg: --verbose, value: false }, config: { arg: --config, value: true }, };verbose传入true时开启详细日志便于排查合并过程config可以传入自定义 CRACO 配置文件的路径字符串其优先级与 config.ts 中getConfigPath的解析逻辑一致显式config优先于package.json中的cracoConfig字段也优先于根目录自动探测的craco.config.*/.cracorc*文件。2. 典型用法导出独立的 jest.config.jsconst { createJestConfig } require(craco/craco); const cracoConfig require(./craco.config.js); const jestConfig createJestConfig(cracoConfig); module.exports jestConfig;这份文件可以直接替代package.json中的jest字段让 IDE 或 CI 中的 Jest 直接使用 CRACO 合并后的配置而不必经过craco test命令。3. 重要前提不接受函数形式的 cracoConfigcreateJestConfig不接受cracoConfig作为函数。如果你的craco.config.js导出的是一个函数例如为了按env动态生成配置必须先自己调用它拿到对象后再传入const cracoConfigFactory require(./craco.config.js); const cracoConfig cracoConfigFactory({ env: process.env.NODE_ENV }); const jestConfig createJestConfig(cracoConfig);这一限制在源码中有明确体现——packages/craco/src/lib/features/jest/api.ts 的createJestConfig实现开头直接对函数类型抛出错误if (isFunction(callerCracoConfig)) { throw new Error(craco: cracoConfig should be an object.); }注意这里的函数是指craco.config.js导出的顶层配置函数与 CRACO 配置内部jest.configure支持函数是两回事。4. 底层执行流程从 packages/craco/src/lib/features/jest/api.ts 的源码可以看到createJestConfig的完整调用链校验cracoConfig必填且必须是对象环境变量兜底若process.env.NODE_ENV未设置默认置为development参数注入setArgs(options)让后续getConfigPath等逻辑感知--config与--verbose构造 context以{ env: process.env.NODE_ENV, ...callerContext }合并出JestContext处理 CRACO 配置processCracoConfig(cracoConfig, context)将用户配置与DEFAULT_CONFIG深合并并执行 CRACO 插件见 config.ts解析 CRA 路径context.paths getCraPaths(cracoConfig)从react-scripts的config/paths.js读取全部路径加载 CRA 的 Jest 配置提供者loadJestConfigProvider(cracoConfig)即react-scripts的scripts/utils/createJestConfig.js合并mergeJestConfig(cracoConfig, craJestConfigProvider, context)输出最终 Jest 配置。最终合并阶段merge-jest-config.ts还会做两件重要的事依据cracoConfig.jest.babel.addPresets/addPlugins用 CRACO 自带的 jest-babel-transform 覆盖 CRA 默认的 Babel transformer并把cracoConfig挂到jestConfig.globals._cracoConfig上供 transformer 读取对jest.configure对象或函数执行合并并应用jest相关的 CRACO 插件。三、WebpackcreateWebpackDevConfig与createWebpackProdConfig1. 函数签名与参数createWebpackDevConfig(cracoConfig, context {}, options { verbose: false, config: null }) createWebpackProdConfig(cracoConfig, context {}, options { verbose: false, config: null })两个函数签名完全一致差别仅在加载的 CRA 构建配置与环境变量createWebpackDevConfig—— 对应development环境加载react-scripts/config/webpack.config.js旧版本则为webpack.config.dev.jscreateWebpackProdConfig—— 对应production环境加载同一份webpack.config.js旧版本则为webpack.config.prod.js。2. 典型用法导出独立的 webpack.config.jsconst { createWebpackDevConfig } require(craco/craco); const cracoConfig require(./craco.config.js); const webpackConfig createWebpackDevConfig(cracoConfig); module.exports webpackConfig;同理生产环境使用createWebpackProdConfig。这类导出常用于需要以真实构建配置为输入的工具链例如自定义打包脚本、构建可视化分析或把配置交给不经过craco build的独立执行器。3. 同样不接受函数形式的 cracoConfig文档明确强调createWebpackDevConfig与createWebpackProdConfig不接受cracoConfig作为函数若配置文件导出的是函数需先手动调用。这一校验同样体现在 packages/craco/src/lib/features/webpack/api.ts 的公共实现createWebpackConfig中if (!callerCracoConfig) { throw new Error(craco: cracoConfig is required.); } if (isFunction(callerCracoConfig)) { throw new Error(craco: cracoConfig should be an object.); }4. 底层执行流程两个 Webpack API 内部共用同一个createWebpackConfig实现api.ts流程与 Jest 版本高度对称校验配置必填且为对象若NODE_ENV未设置按目标环境兜底dev 为developmentprod 为productionsetArgs(options)注入 CLI 参数构造WebpackContext{ env: process.env.NODE_ENV, ...callerContext }processCracoConfig处理用户配置含插件context.paths getCraPaths(cracoConfig)通过loadWebpackDevConfig/loadWebpackProdConfig见 cra.ts加载 CRA 原始 Webpack 配置调用mergeWebpackConfig完成全部覆盖合并并返回。5. Webpack 合并阶段做了什么mergeWebpackConfigmerge-webpack-config.ts是 Webpack 链路的枢纽依次执行内置特性覆盖overrideBabel、overrideEsLint、overrideStyle、overrideTypeScript对应 babel.ts、eslint.ts、style/style.ts、typescript.tsalias 合并webpack.alias追加到resolve.alias插件增删兼容旧式plugins: [...]数组直接追加也支持plugins: { add: [...], remove: [...] }按先 remove 后 add的顺序处理removePluginsFromWebpackConfig / addPluginsconfigure 总控webpack.configure若为对象则用webpack-merge合并若为函数则把(webpackConfig, context)交给你完全掌控应用 Webpack 相关 CRACO 插件。也就是说通过createWebpackDevConfig/createWebpackProdConfig拿到的与craco start/craco build内部实际使用的配置是同一条合并流水线的产物。四、context 与 options 的深层语义1. context 对象的结构三个 API 的第二个参数context都以BaseContext为基座见 packages/craco-types/src/context.tsexport interface BaseContext { env?: string; // 当前 NODE_ENV paths?: CraPaths; // CRA 使用的全部路径 }其中paths由 CRACO 在内部自动填充来自react-scripts的config/paths.js包含appPath、appSrc、appBuild、appHtml、appIndexJs等字段这与 configuration/getting-started.md 中上下文对象{ env, paths }的描述一致。对于 Jest 场景createJestConfig传入的 context 会被扩展为JestContext额外拥有两个 CRA 提供的属性resolve—— 解析react-scripts内部模块路径的函数rootDir—— 项目根目录。见 jest.md 与JestContext类型定义。2. options 与 CLI 的对应关系options对象不是花架子——它会被setArgs写入 CRACO 的全局参数区args.ts从而影响后续的配置加载config指定自定义 CRACO 配置文件的路径等价于 CLI 的--configverbose开启日志输出等价于--verbose。如果你在脚本中直接调用这些 API同时又希望它们读取--config指定的配置文件可以像这样显式传入const webpackConfig createWebpackDevConfig(cracoConfig, {}, { config: ./config/my-craco-config.js, verbose: true, });五、实战组合在第三方工具中完整复用 CRACO1. 与 IDE Jest 集成多数 IDE 会优先读取根目录的jest.config.js。将createJestConfig的产物作为默认导出即可让 IDE 的测试运行器与craco test使用完全一致的 Jest 配置const { createJestConfig } require(craco/craco); const cracoConfig require(./craco.config.js); // 按需传入环境例如 CI 中为 test const jestConfig createJestConfig(cracoConfig, { env: test }); module.exports jestConfig;2. 生成 Webpack 配置供分析脚本使用const { createWebpackProdConfig } require(craco/craco); const cracoConfig require(./craco.config.js); const webpackConfig createWebpackProdConfig(cracoConfig); // 检查最终产物中是否包含预期的插件 const hasHtmlPlugin webpackConfig.plugins.some( (p) p.constructor p.constructor.name HtmlWebpackPlugin ); console.log(HtmlWebpackPlugin present:, hasHtmlPlugin);3. 函数式 craco.config.js 的适配如果项目配置是函数形式getting-started.md 的导出方式务必先调用再传入const cracoConfigFactory require(./craco.config.js); const cracoConfig cracoConfigFactory({ env: process.env.NODE_ENV || development }); const jestConfig createJestConfig(cracoConfig);六、常见问题与注意事项顶层配置函数必须手动调用三个 API 均不接受函数形式的cracoConfig这是文档与源码双重确认的硬性约束。NODE_ENV的兜底行为调用时若环境变量未设置Jest API 默认补为developmentWebpack 则按 dev/prod 对应补值。若你的配置逻辑依赖特定环境建议在调用前自行设置NODE_ENV。config选项的优先级options.config指定的路径 package.json的cracoConfig字段 根目录自动探测craco.config.ts/js/cjs、.cracorc.ts/js、.cracorc等探测顺序与优先级由 config.ts 中的searchPlaces定义。context.paths 会被自动覆盖即使你手动传入了pathsgetCraPaths的结果也会在processCracoConfig之后覆写context.paths因此无需也不建议手动构造路径。版本前提当前仓库中craco/craco的 peerDependency 为react-scripts: ^5.0.0见 packages/craco/package.json上述 API 面向 react-scripts 5.x 设计旧版 react-scripts 的 legacy 配置文件webpack.config.dev.js/webpack.config.prod.js仍由 cra.ts 兼容处理。结语CRACO Configuration API 的价值在于把配置计算与构建执行解耦createJestConfig、createWebpackDevConfig、createWebpackProdConfig三个函数暴露出与 CLI 完全同源的配置流水线让任何第三方工具都能拿到真实、完整的最终配置。结合 index.ts 的导出面、api.ts 与 api.ts 的实现以及 merge-jest-config.ts、merge-webpack-config.ts 的合并细节你可以在自己的工具链中放心复用这套成熟的配置生成能力。赞分享开发工具前端构建【免费下载链接】cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址https://gitcode.com/gh_mirrors/cr/craco点击查看免费下载相关推荐Windows 11终极瘦身神器Win11Debloat让你的系统快如闪电Windows 11终极瘦身神器Win11Debloat让你的系统快如闪电 还在为Windows 11的卡顿、广告和隐私泄露烦恼吗今天我要给你推荐一款完全免桌面应用CLITabNine第三方集成案例与CI/CD工具的无缝协作TabNine第三方集成案例与CI/CD工具的无缝协作 在现代软件开发流程中开发者每天需要在代码编辑器与CI/CD持续集成/持续部署工具间频繁切换手动开发工具AI 应用gh_mirrors/ba/bases第三方集成与CI/CD工具无缝对接方案gh_mirrors/ba/bases第三方集成与CI/CD工具无缝对接方案 你还在为TypeScript项目在CI/CD流程中配置不一致而头疼还在手动同步开发工具前端构建上一篇小红书作品采集终极指南XHS-Downloader免费开源工具快速上手下一篇小红书内容采集工具使用指南三步搞定图文与视频批量下载创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
深入掌握 CRACO Configuration API：让 Jest 与 Webpack 配置与第三方工具无缝集成
开发工具前端构建【免费下载链接】cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址https://gitcode.com/gh_mirrors/cr/craco点击查看免费下载CRACOCreate React App Configuration Override作为 Create React App 的配置覆盖层其核心价值不仅在于通过craco start、craco build、craco test等命令直接改造构建流程还在于对外暴露了一套可编程的Configuration API。本篇文章聚焦于 configuration-api.md 文档所讲解的核心内容如何在第三方工具如独立的 Jest 配置文件、自定义 Webpack 配置文件、编辑器插件、CI 脚本等中直接获取到 CRACO 处理之后的最终 Jest 与 Webpack 配置。读完本文你将掌握createJestConfig、createWebpackDevConfig、createWebpackProdConfig三个 API 的完整签名、参数语义、使用前提与实战写法并理解它们背后的配置加载、上下文构造与合并流程。一、Configuration API 解决什么问题在常规用法中CRACO 通过替换react-scripts的脚本craco start等在进程内部完成配置覆盖。但如果你希望把 CRACO 生成的配置导出给其他工具消费——例如用一份独立的jest.config.js驱动 IDE 的 Jest 集成VS Code、WebStorm 等在 CI 中对生成的 Webpack 配置做二次检查或定制为可视化构建工具、性能分析工具提供真实的构建配置编写自己的脚本复用 CRACO 的合并逻辑而不必重新实现一遍。此时就需要 Configuration API。该 API 目前支持Jest与Webpack两大构建链路二者在 packages/craco/src/index.ts 中作为包的公开导出面暴露export { createJestConfig, createWebpackDevConfig, createWebpackProdConfig, createDevServerConfigProviderProxy, // ... 其他工具函数 };二、JestcreateJestConfig1. 函数签名与参数createJestConfig(cracoConfig, context {}, options { verbose: false, config: null })该函数接收三个参数返回一个完整的 Jest 配置对象类型为JestConfig.InitialOptions参数类型说明cracoConfig对象一份 CRACO 配置即craco.config.js中导出的配置对象context对象可选一个 Jest context 对象包含env、paths以及 CRACO 额外注入的resolve、rootDiroptions对象可选{ verbose?: boolean, config?: string }与 CLI 的--verbose、--config参数对应options中的两个字段与 packages/craco/src/lib/args.ts 中定义的 CLI 参数解析规则一一对应const args: CliArgSpec { verbose: { arg: --verbose, value: false }, config: { arg: --config, value: true }, };verbose传入true时开启详细日志便于排查合并过程config可以传入自定义 CRACO 配置文件的路径字符串其优先级与 config.ts 中getConfigPath的解析逻辑一致显式config优先于package.json中的cracoConfig字段也优先于根目录自动探测的craco.config.*/.cracorc*文件。2. 典型用法导出独立的 jest.config.jsconst { createJestConfig } require(craco/craco); const cracoConfig require(./craco.config.js); const jestConfig createJestConfig(cracoConfig); module.exports jestConfig;这份文件可以直接替代package.json中的jest字段让 IDE 或 CI 中的 Jest 直接使用 CRACO 合并后的配置而不必经过craco test命令。3. 重要前提不接受函数形式的 cracoConfigcreateJestConfig不接受cracoConfig作为函数。如果你的craco.config.js导出的是一个函数例如为了按env动态生成配置必须先自己调用它拿到对象后再传入const cracoConfigFactory require(./craco.config.js); const cracoConfig cracoConfigFactory({ env: process.env.NODE_ENV }); const jestConfig createJestConfig(cracoConfig);这一限制在源码中有明确体现——packages/craco/src/lib/features/jest/api.ts 的createJestConfig实现开头直接对函数类型抛出错误if (isFunction(callerCracoConfig)) { throw new Error(craco: cracoConfig should be an object.); }注意这里的函数是指craco.config.js导出的顶层配置函数与 CRACO 配置内部jest.configure支持函数是两回事。4. 底层执行流程从 packages/craco/src/lib/features/jest/api.ts 的源码可以看到createJestConfig的完整调用链校验cracoConfig必填且必须是对象环境变量兜底若process.env.NODE_ENV未设置默认置为development参数注入setArgs(options)让后续getConfigPath等逻辑感知--config与--verbose构造 context以{ env: process.env.NODE_ENV, ...callerContext }合并出JestContext处理 CRACO 配置processCracoConfig(cracoConfig, context)将用户配置与DEFAULT_CONFIG深合并并执行 CRACO 插件见 config.ts解析 CRA 路径context.paths getCraPaths(cracoConfig)从react-scripts的config/paths.js读取全部路径加载 CRA 的 Jest 配置提供者loadJestConfigProvider(cracoConfig)即react-scripts的scripts/utils/createJestConfig.js合并mergeJestConfig(cracoConfig, craJestConfigProvider, context)输出最终 Jest 配置。最终合并阶段merge-jest-config.ts还会做两件重要的事依据cracoConfig.jest.babel.addPresets/addPlugins用 CRACO 自带的 jest-babel-transform 覆盖 CRA 默认的 Babel transformer并把cracoConfig挂到jestConfig.globals._cracoConfig上供 transformer 读取对jest.configure对象或函数执行合并并应用jest相关的 CRACO 插件。三、WebpackcreateWebpackDevConfig与createWebpackProdConfig1. 函数签名与参数createWebpackDevConfig(cracoConfig, context {}, options { verbose: false, config: null }) createWebpackProdConfig(cracoConfig, context {}, options { verbose: false, config: null })两个函数签名完全一致差别仅在加载的 CRA 构建配置与环境变量createWebpackDevConfig—— 对应development环境加载react-scripts/config/webpack.config.js旧版本则为webpack.config.dev.jscreateWebpackProdConfig—— 对应production环境加载同一份webpack.config.js旧版本则为webpack.config.prod.js。2. 典型用法导出独立的 webpack.config.jsconst { createWebpackDevConfig } require(craco/craco); const cracoConfig require(./craco.config.js); const webpackConfig createWebpackDevConfig(cracoConfig); module.exports webpackConfig;同理生产环境使用createWebpackProdConfig。这类导出常用于需要以真实构建配置为输入的工具链例如自定义打包脚本、构建可视化分析或把配置交给不经过craco build的独立执行器。3. 同样不接受函数形式的 cracoConfig文档明确强调createWebpackDevConfig与createWebpackProdConfig不接受cracoConfig作为函数若配置文件导出的是函数需先手动调用。这一校验同样体现在 packages/craco/src/lib/features/webpack/api.ts 的公共实现createWebpackConfig中if (!callerCracoConfig) { throw new Error(craco: cracoConfig is required.); } if (isFunction(callerCracoConfig)) { throw new Error(craco: cracoConfig should be an object.); }4. 底层执行流程两个 Webpack API 内部共用同一个createWebpackConfig实现api.ts流程与 Jest 版本高度对称校验配置必填且为对象若NODE_ENV未设置按目标环境兜底dev 为developmentprod 为productionsetArgs(options)注入 CLI 参数构造WebpackContext{ env: process.env.NODE_ENV, ...callerContext }processCracoConfig处理用户配置含插件context.paths getCraPaths(cracoConfig)通过loadWebpackDevConfig/loadWebpackProdConfig见 cra.ts加载 CRA 原始 Webpack 配置调用mergeWebpackConfig完成全部覆盖合并并返回。5. Webpack 合并阶段做了什么mergeWebpackConfigmerge-webpack-config.ts是 Webpack 链路的枢纽依次执行内置特性覆盖overrideBabel、overrideEsLint、overrideStyle、overrideTypeScript对应 babel.ts、eslint.ts、style/style.ts、typescript.tsalias 合并webpack.alias追加到resolve.alias插件增删兼容旧式plugins: [...]数组直接追加也支持plugins: { add: [...], remove: [...] }按先 remove 后 add的顺序处理removePluginsFromWebpackConfig / addPluginsconfigure 总控webpack.configure若为对象则用webpack-merge合并若为函数则把(webpackConfig, context)交给你完全掌控应用 Webpack 相关 CRACO 插件。也就是说通过createWebpackDevConfig/createWebpackProdConfig拿到的与craco start/craco build内部实际使用的配置是同一条合并流水线的产物。四、context 与 options 的深层语义1. context 对象的结构三个 API 的第二个参数context都以BaseContext为基座见 packages/craco-types/src/context.tsexport interface BaseContext { env?: string; // 当前 NODE_ENV paths?: CraPaths; // CRA 使用的全部路径 }其中paths由 CRACO 在内部自动填充来自react-scripts的config/paths.js包含appPath、appSrc、appBuild、appHtml、appIndexJs等字段这与 configuration/getting-started.md 中上下文对象{ env, paths }的描述一致。对于 Jest 场景createJestConfig传入的 context 会被扩展为JestContext额外拥有两个 CRA 提供的属性resolve—— 解析react-scripts内部模块路径的函数rootDir—— 项目根目录。见 jest.md 与JestContext类型定义。2. options 与 CLI 的对应关系options对象不是花架子——它会被setArgs写入 CRACO 的全局参数区args.ts从而影响后续的配置加载config指定自定义 CRACO 配置文件的路径等价于 CLI 的--configverbose开启日志输出等价于--verbose。如果你在脚本中直接调用这些 API同时又希望它们读取--config指定的配置文件可以像这样显式传入const webpackConfig createWebpackDevConfig(cracoConfig, {}, { config: ./config/my-craco-config.js, verbose: true, });五、实战组合在第三方工具中完整复用 CRACO1. 与 IDE Jest 集成多数 IDE 会优先读取根目录的jest.config.js。将createJestConfig的产物作为默认导出即可让 IDE 的测试运行器与craco test使用完全一致的 Jest 配置const { createJestConfig } require(craco/craco); const cracoConfig require(./craco.config.js); // 按需传入环境例如 CI 中为 test const jestConfig createJestConfig(cracoConfig, { env: test }); module.exports jestConfig;2. 生成 Webpack 配置供分析脚本使用const { createWebpackProdConfig } require(craco/craco); const cracoConfig require(./craco.config.js); const webpackConfig createWebpackProdConfig(cracoConfig); // 检查最终产物中是否包含预期的插件 const hasHtmlPlugin webpackConfig.plugins.some( (p) p.constructor p.constructor.name HtmlWebpackPlugin ); console.log(HtmlWebpackPlugin present:, hasHtmlPlugin);3. 函数式 craco.config.js 的适配如果项目配置是函数形式getting-started.md 的导出方式务必先调用再传入const cracoConfigFactory require(./craco.config.js); const cracoConfig cracoConfigFactory({ env: process.env.NODE_ENV || development }); const jestConfig createJestConfig(cracoConfig);六、常见问题与注意事项顶层配置函数必须手动调用三个 API 均不接受函数形式的cracoConfig这是文档与源码双重确认的硬性约束。NODE_ENV的兜底行为调用时若环境变量未设置Jest API 默认补为developmentWebpack 则按 dev/prod 对应补值。若你的配置逻辑依赖特定环境建议在调用前自行设置NODE_ENV。config选项的优先级options.config指定的路径 package.json的cracoConfig字段 根目录自动探测craco.config.ts/js/cjs、.cracorc.ts/js、.cracorc等探测顺序与优先级由 config.ts 中的searchPlaces定义。context.paths 会被自动覆盖即使你手动传入了pathsgetCraPaths的结果也会在processCracoConfig之后覆写context.paths因此无需也不建议手动构造路径。版本前提当前仓库中craco/craco的 peerDependency 为react-scripts: ^5.0.0见 packages/craco/package.json上述 API 面向 react-scripts 5.x 设计旧版 react-scripts 的 legacy 配置文件webpack.config.dev.js/webpack.config.prod.js仍由 cra.ts 兼容处理。结语CRACO Configuration API 的价值在于把配置计算与构建执行解耦createJestConfig、createWebpackDevConfig、createWebpackProdConfig三个函数暴露出与 CLI 完全同源的配置流水线让任何第三方工具都能拿到真实、完整的最终配置。结合 index.ts 的导出面、api.ts 与 api.ts 的实现以及 merge-jest-config.ts、merge-webpack-config.ts 的合并细节你可以在自己的工具链中放心复用这套成熟的配置生成能力。赞分享开发工具前端构建【免费下载链接】cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址https://gitcode.com/gh_mirrors/cr/craco点击查看免费下载相关推荐Windows 11终极瘦身神器Win11Debloat让你的系统快如闪电Windows 11终极瘦身神器Win11Debloat让你的系统快如闪电 还在为Windows 11的卡顿、广告和隐私泄露烦恼吗今天我要给你推荐一款完全免桌面应用CLITabNine第三方集成案例与CI/CD工具的无缝协作TabNine第三方集成案例与CI/CD工具的无缝协作 在现代软件开发流程中开发者每天需要在代码编辑器与CI/CD持续集成/持续部署工具间频繁切换手动开发工具AI 应用gh_mirrors/ba/bases第三方集成与CI/CD工具无缝对接方案gh_mirrors/ba/bases第三方集成与CI/CD工具无缝对接方案 你还在为TypeScript项目在CI/CD流程中配置不一致而头疼还在手动同步开发工具前端构建上一篇小红书作品采集终极指南XHS-Downloader免费开源工具快速上手下一篇小红书内容采集工具使用指南三步搞定图文与视频批量下载创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
