开发工具前端构建【免费下载链接】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 项目中让 ESLint 放弃 CRA 内置的配置文件转而读取项目根目录下独立的.eslintrc配置文件如.eslintrc.js。读完本文你将掌握craco.config.js中eslint.mode: file的配置方式、其与默认extends模式的本质区别以及 CRACO 底层是如何通过改写ESLintWebpackPlugin的插件选项来实现这一行为的。为什么需要独立的 ESLint 配置文件Create React AppCRA在其react-scripts内部已经内置了一套 ESLint 配置并通过eslint-webpack-plugin注入到 webpack 的构建流程中。这意味着默认情况下项目根目录的.eslintrc文件是不会生效的——CRA 通过插件的baseConfig选项直接指定了要使用的规则而不是让 ESLint 自己去磁盘上查找配置文件。CRACO 对此提供了两种处理模式eslint.modeextends默认你在craco.config.js中给出的 ESLint 配置会与 CRA 内置配置合并保留 CRA 的规则基础并在此基础上扩展file重置CRA 的 ESLint 配置让 ESLint 回归标准行为——从项目根目录的.eslintrc配置文件或package.json中的eslintConfig字段读取全部规则。如果你的团队已经有成熟的、独立维护的 ESLint 配置库例如包含 prettier 集成、airbnb 规范等file模式就是让这套配置在 CRA 项目中直接落地的标准做法。快速上手三步完成配置第 1 步用 craco 脚本替换 react-scripts首先在package.json中把构建脚本替换为 craco{ scripts: { start: craco start, build: craco build, test: craco test } }第 2 步在 craco.config.js 中开启 file 模式在项目根目录创建craco.config.js声明 ESLint 使用独立配置文件模式module.exports { eslint: { mode: file, }, };第 3 步编写 .eslintrc.js在项目根目录创建.eslintrc.js。如果希望保留 CRA 原有的规则基础推荐的稳妥做法通过extends引入eslint-config-react-app——这是react-scripts随包提供的共享配置可直接引用module.exports { extends: [eslint-config-react-app], };配置完成后运行craco start或craco buildCRACO 会告诉 webpack 中的ESLintWebpackPlugin改用.eslintrc.js作为配置来源。从源码看构建时控制台会输出日志Overrided ESLint config to use a config file.见 eslint.ts 中的useEslintConfigFile函数。file 模式底层发生了什么源码级解析CRACO 对 ESLint 的改写集中实现在 eslint.ts 的overrideEsLint函数中它会在 webpack 配置合并阶段被调用。整个流程如下定位插件通过getPlugin(webpackConfig, pluginByName(ESLintWebpackPlugin))在 webpack 的plugins数组中按构造函数名查找ESLintWebpackPlugin实例pluginByName与getPlugin的实现见 webpack-plugins.ts。如果找不到CRACO 会输出Cannot find ESLint plugin (ESLintWebpackPlugin).并原样返回 webpack 配置开启 ignore 支持调用enableEslintIgnoreFile(match)将插件选项中的ignore置为true。这意味着你可以在项目里使用.eslintignore文件控制哪些文件不参与检查按 mode 分流当mode file时调用useEslintConfigFile(match)核心动作只有两个function useEslintConfigFile(plugin: any) { if (plugin.options) { plugin.options.useEslintrc true; delete plugin.options.baseConfig; } else { plugin.options { useEslintrc: true, }; } log(Overrided ESLint config to use a config file.); }这里的关键是eslint-webpack-plugin的两个选项语义useEslintrc: true告诉 ESLint 从项目目录向上查找.eslintrc配置文件并加载baseConfig这是 CRA 用来硬编码内置规则的对象。mode: file会把它删除从而彻底摆脱 CRA 默认规则的约束。删掉baseConfig后ESLint 就完全以.eslintrc.js或其他被识别的配置文件为准——这正好对应官方文档中描述的 CRA settings will be resetCRA 设置将被重置。调用链与执行时机overrideEsLint并不是孤立运行的它位于整个 webpack 配置改写管线的中段。在 merge-webpack-config.ts 中可以看到明确的执行顺序resultingWebpackConfig overrideBabel(cracoConfig, resultingWebpackConfig, context); resultingWebpackConfig overrideEsLint(cracoConfig, resultingWebpackConfig, context); resultingWebpackConfig overrideStyle(cracoConfig, resultingWebpackConfig, context); resultingWebpackConfig overrideTypeScript(cracoConfig, resultingWebpackConfig);而mergeWebpackConfig又会被createWebpackDevConfig/createWebpackProdConfig调用见 api.ts并分别作用于craco start的开发构建与craco build的生产构建。也就是说mode: file对 dev 与 prod 两条构建链路都生效。如果你更关注最终生成的 webpack 配置也可以通过createWebpackDevConfig/createWebpackProdConfig编程式地拿到合并后的完整配置进行查验。file 模式下仍可组合使用的配置项完整的eslint配置块结构如下类型定义见 config.ts 中的CracoEsLintConfigmodule.exports { eslint: { enable: true, /* 默认值是否启用 ESLint */ mode: file /* 默认 extends可选 extends | file */, configure: { /* ... */ }, configure: (eslintConfig, { env, paths }) { /* ... */ return eslintConfig; }, pluginOptions: { /* ... */ }, pluginOptions: (eslintPluginOptions, { env, paths }) { /* ... */ return eslintPluginOptions; }, }, };各字段在file模式下的实际作用eslint.enableboolean默认true。若设为falseoverrideEsLint会直接调用disableEslint通过removePlugins把ESLintWebpackPlugin从 webpack 配置中移除构建时输出Disabled ESLint.。适合在特定环境如 CI 上只想编译不想做静态检查临时关停 ESLint。eslint.configureESLintConfig对象或函数。需要特别留意在file模式下configure不会被应用。从源码的 mode 分支可以确认——mode file走useEslintConfigFileconfigure所在的extendsEslintConfig只在默认的extends模式下被调用。原因不难理解file 模式的定位就是把规则决策权完全交给独立配置文件此时再用configure注入规则反而会造成双份配置来源的混乱。规则统一写进.eslintrc.js即可。eslint.pluginOptionseslint-webpack-plugin的选项对象或函数在file模式下仍然生效见overrideEsLint末尾的applyPluginOptions调用。它采用deepMergeWithArray与插件既有选项深合并若传函数则接收(pluginOptions, { env, paths })并返回新选项。典型的用途包括module.exports { eslint: { mode: file, pluginOptions: { extensions: [js, jsx, ts, tsx], failOnError: process.env.NODE_ENV production, emitWarning: true, }, }, };对象字面量与函数两种写法与 CRACO 其他配置块一样configure和pluginOptions都支持对象字面量和函数两种形态对象字面量与 CRA 原始配置做深合并deepMergeWithArray简单直观函数接收两个参数——第一个是当前配置对象第二个是上下文对象{ env, paths }其中env是当前的NODE_ENVdevelopment / production / testpaths是 CRA 内部使用的路径集合。函数需要返回新的配置对象CRACO 会校验返回值非空否则抛出错误如eslint.configure function didnt return a config object.。典型场景是按环境差异化配置例如只在开发模式下开启某个规则module.exports { eslint: { mode: file, pluginOptions: (options, { env }) { if (env development) { options.failOnError false; } return options; }, }, };保留 CRA 规则基础extends 的组合技巧file模式不会自动保留 CRA 的任何规则因为baseConfig已被删除。如果你只是想换一种方式组织配置、但规则体系不变务必像开篇示例那样显式extendsCRA 提供的共享配置module.exports { extends: [eslint-config-react-app], rules: { // 在 CRA 规则之上追加或覆盖 no-console: warn, react/jsx-uses-react: error, }, };ESLint 的extends机制天然支持继承叠加eslint-config-react-app提供 React/JSX 相关的全部推荐规则你的rules字段在其之上做增量覆盖。这也与 CRACO 在extends模式下deepMergeWithArray的合并思路殊途同归——只是把合并发生的地点从craco.config.js移到了.eslintrc.js。使用 .eslintignore如前面源码分析所述mode: file会在设置useEslintrc的同时把插件选项的ignore置为true因此.eslintignore会自然生效。示例build/ dist/ public/ src/**/*.d.ts这样可以精细控制哪些文件不进入 ESLint 检查范围避免对产物目录或自动生成的类型声明文件做无谓的 lint。测试佐证与验证方式仓库的单元测试中包含了与 ESLint 配置相关的用例可用来验证上述配置行为。见 test/unit/merging-tests/custom-eslint-config/eslint.test.js其断言了configure中的extends同时保留react-appCRA 基础与plugin:prettier/recommended自定义扩展自定义规则如no-console: error、no-debugger: error被正确写入原有规则不会被移除自定义配置的规则数量不小于 mock 基线。对应示例配置见同目录下的 craco.config.js 与基线 eslint.config.mock.js。如果你想在自己的项目里快速验证mode: file是否生效可以在.eslintrc.js中故意写入一条会报错的规则然后运行craco start——如果构建或控制台按预期给出 lint 错误说明独立配置文件已被加载。常见问题问mode: file后运行报 Cannot find ESLint plugin答这说明 CRA 当前版本可能没有在 webpack 中使用ESLintWebpackPlugin或插件实例名不同。CRACO 会输出该错误日志并跳过 ESLint 改写属于保护性降级行为可升级react-scripts版本或检查是否被其他配置移除了该插件。问file模式还能用eslint.configure吗答不能。源码分支表明configure仅服务于默认的extends模式file 模式下请把全部规则写入.eslintrc.js或package.json的eslintConfig字段。问两种模式如何选择答规则简单、希望跟随 CRA 演进时用默认的extends模式即可规则体系复杂、需要独立维护例如团队共享一套规范配置包时file模式能让你完全脱离 CRA 的默认约束。相关参考ESLint 完整配置选项说明configuration/eslint.md配置文件的命名规则、cracoConfig自定义路径与 override 模式详解configuration/getting-started.mdESLint 改写核心实现packages/craco/src/lib/features/webpack/eslint.tsESLint 配置类型定义packages/craco-types/src/config.ts赞分享开发工具前端构建【免费下载链接】cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址https://gitcode.com/gh_mirrors/cr/craco点击查看免费下载相关推荐使用 CRACO 的 PostCSS Config File 模式让 craco.config.js 读取独立的 postcss.config.js使用 CRACO 的 PostCSS Config File 模式让 craco.config.js 读取独立的 postcss.config.js 本篇指南开发工具前端构建Mailur安全实践指南保护你的邮件数据与身份验证机制详解Mailur安全实践指南保护你的邮件数据与身份验证机制详解 在当今数字时代邮件安全至关重要。 Mailur 作为一款轻量级Webmail解决方案提供了强大开发工具前端构建Apache APISIX独立模式YAML配置文件管理指南Apache APISIX独立模式YAML配置文件管理指南 概述 Apache APISIX独立模式Standalone Mode是一种无需依赖etcd等后端微服务云原生上一篇functions-samples深度解析Node 1st Gen与2nd Gen云函数的区别与迁移路径下一篇ESP32热敏打印机DIY终极方案百元打造智能无线打印神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考