解决 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 生成一个新的项目，然后将旧的代码移植过去。
虽然有点复杂和折腾，但是好歹有了可以一举两得的解决方案吧。