create-react-app(cra) 或者craco，会忽略eslintignore的解决方案

JavaScript011

create-react-app(cra) 或者craco，会忽略eslintignore的解决方案,第1张

create-react-app内置了eslint，但是却不能正确读取eslintignore文件。

react这么大的项目，竟然还有这么明显的bug。

因为我是在公司的项目上发现的这个问题 ，在node_modules 里面找到react-scripts 发现版本是3.4.1，不清楚新版本的cra是否修复了这个问题。

从StackOverflow上找到这个方法，但是对我没用。

可以参考这个帖子 https://stackoverflow.com/questions/42324618/eslintignore-is-ignored-by-create-react-app/45745206#45745206

据说cra某次提交修复了这个问题。可以从 env读取变量。

只要创建一个 .env 文件，然后加入下面一行。

这个env文件确实是生效的。

比如你在里面写上

然后你执行yarn start 确实启动在3101端口了

但是EXTEND_ESLINT=true这个配置对我是不生效的

这其实是4种忽略注释方式中的一种，public目录是因为eslint不会检查这个目录

但是这样项目里很多文件要加，就很蠢。我需要的是一种改动文件最少的方式。

首先我们在 .eslintrc.js 里面配置 ignorePatterns

比如：

然后我们在craco.config.js里面进行引入。

这样就可以了。

想要支持eslintignore也可以自己写js读取。但是我懒，所以直接配置ignorePatterns比较方便

本次项目使用create-react-app命令进行创建

这里我选择用Typescript作为开发语言。

create-react-app的目录结构

以上2个步骤也有antd官网提供简化版本。 创建cra-antd typescript

对package.json进行修改

在项目 根目录 创建一个 craco.config.js 用于修改默认配置。

然后安装 craco-less 并修改 craco.config.js 文件如下。

配置craco.config.js，可以copy下来，然后根据需求自行修改。

以下是antd官方demo的配置，大家可以按需修改。

创建less

在该less下配置项目的主要样式等

在src/index.tsx下全局引入index.less

项目框架第一步骤搞定。

由于项目采用 qiankun 模块化开发，子项目依赖基座项目theme和antd版本等资源，这样会引发一些未知的bug，比如基座项目的antd版本过低，或子项目一些样式使用了基座项目的样式，造成子项目样式污染等；

为了解决这个问题，想到了沙盒模式或者版本隔离

1、在子项目中的 craco.config.js 的 externals 中删除 基座项目的 antd；

2、在入口文件index.tsx中引入 import 'antd/dist/antd.less'，并添加

3、<App/>最外层添加

4、theme配置中加上前缀

5、 craco.config.js 配置中添加