解决 create-react-app 生成的项目中不弹出配置就无法自定义 eslint global 变量的问题

create-react-app 是非常好用的前端 react 脚手架工具,而且还是 Facebook 官方出品的,如果没有特殊的要求,现阶段一般都推荐直接使用这个来构建项目。

但是最近碰到一个问题,折腾了我好久才找到解决方案。

首先我们知道,create-react-app 默认是配置了 eslint 的,但是如果我们不将配置 eject 出来的情况下,我们是无法通过在项目根目录添加 .eslintrc 来配置自定义规则的。

这个规定,之前并不知悉,让我折腾了好一番,才终于接受这个残忍的现实。

而后,我也在官方文档找到了说明:

Note that even if you customise your ESLint config, these changes will only affect the editor integration. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.

可以看到的是,我们即使配置了 .eslintrc 规则,也只会影响到我们浏览器对于 eslint 规则的运用,无法在编译调试的过程中,对代码进行规范。

说白了,就是,我们必须要用默认的配置。

但是其实这点并不是真的完全不能更改的,比如你手动深入 node_modules 内部,将默认的 eslint 规则改掉。

但是这样改,其实并不友好。

因为如果我们换一台电脑,或者与我们的小伙伴协同开发的话,配置起来就太困难了。

但是其实有种方法是可以的,就是将配置 eject 出来,但是问题是 eject 是不可逆的,eject 完了以后,配置就隐藏不了了,一般情况下,是没有问题的,但是刚好我又碰到问题了。

因为为了偷懒,我用了 antd 框架,这个框架非常优秀,可以很快写出很好看的页面出来,组建很全,也很丰富。

但是问题在于,默认情况下,如果你用了这个框架,你就相当于要将整个组建的 css 引入到项目中去,这样就会导致 css 文件非常大,非常冗余。

官方也考虑到了这个问题,因此给出了一种解决方案,供我们进行按需加载:

我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(gzipped 后一共大约 60kb)。
此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。

但你一旦 eject 了以后,这种方案就行不通了,因为无法启动项目了。

在官方的 issue 下面,有人反映了同样的问题:https://github.com/ant-design/ant-design/issues/17933

但是我照着有人提供的方案,去解决这个问题,都不生效。

这就好像是一个死锁一样,我需要修改 eslint,就必须要弹出配置项,但是我一旦弹出了配置项,就无法使 antd 的 css 按需加载了。

怎么办呢?还好我在官网上看到了这篇文章:https://create-react-app.dev/docs/using-global-variables

You can avoid this by reading the global variable explicitly from the window object

刚好符合我的需求。

其实我一开始想要配置 eslint 的时候,最开始的目的就是想要添加 global 变量而已,至于其他的细节部分,倒不是我太过在意的地方。

毕竟 create-react-app 默认配置的 eslint 规则很宽松,你完全可以在编辑器里面配一种自己喜欢的 eslint 规则,来规范你的代码,这其实不影响到你代码的编译。

但是我必须要引入全局变量,以加载一个第三方的框架,而 eslint 默认推荐的 global 却不能运用上去,这就令人头疼了。

但是默认 Windows 是一个全局变量,而第三方框架的全局变量肯定是会挂在到 Windows 对象上去的,我调用全局变量的时候,通过 Windows 对象来调用,就避免了默认 eslint 识别到为定义的变量的尴尬情况了。

其实以前写代码没用 react 框架的时候,很多时候也是这样用的。

但是自从接受了 vue、react 这种前端工程化写代码的方式以后,反而就忘记有的问题也可以采用以前的方案来解决了。

而为了按需加载,我只得重新用 create-react-app 生成一个新的项目,然后将旧的代码移植过去。
虽然有点复杂和折腾,但是好歹有了可以一举两得的解决方案吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容