create-react-app 是非常好用的前端 react 腳手架工具，而且還是 Facebook 官方出品的，如果沒有特殊的要求，現(xiàn)階段一般都推薦直接使用這個來構(gòu)建項目。

但是最近碰到一個問題，折騰了我好久才找到解決方案。

首先我們知道，create-react-app 默認是配置了 eslint 的，但是如果我們不將配置 eject 出來的情況下，我們是無法通過在項目根目錄添加 .eslintrc 來配置自定義規(guī)則的。

這個規(guī)定，之前并不知悉，讓我折騰了好一番，才終于接受這個殘忍的現(xiàn)實。

而后，我也在官方文檔找到了說明：

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 規(guī)則，也只會影響到我們?yōu)g覽器對于 eslint 規(guī)則的運用，無法在編譯調(diào)試的過程中，對代碼進行規(guī)范。

說白了，就是，我們必須要用默認的配置。

但是其實這點并不是真的完全不能更改的，比如你手動深入 node_modules 內(nèi)部，將默認的 eslint 規(guī)則改掉。

但是這樣改，其實并不友好。

因為如果我們換一臺電腦，或者與我們的小伙伴協(xié)同開發(fā)的話，配置起來就太困難了。

但是其實有種方法是可以的，就是將配置 eject 出來，但是問題是 eject 是不可逆的，eject 完了以后，配置就隱藏不了了，一般情況下，是沒有問題的，但是剛好我又碰到問題了。

因為為了偷懶，我用了 antd 框架，這個框架非常優(yōu)秀，可以很快寫出很好看的頁面出來，組建很全，也很豐富。

但是問題在于，默認情況下，如果你用了這個框架，你就相當于要將整個組建的 css 引入到項目中去，這樣就會導致 css 文件非常大，非常冗余。

官方也考慮到了這個問題，因此給出了一種解決方案，供我們進行按需加載：

我們現(xiàn)在已經(jīng)把組件成功運行起來了，但是在實際開發(fā)過程中還有很多問題，例如上面的例子實際上加載了全部的 antd 組件的樣式（gzipped 后一共大約 60kb）。
此時我們需要對 create-react-app 的默認配置進行自定義，這里我們使用 react-app-rewired （一個對 create-react-app 進行自定義配置的社區(qū)解決方案）。

但你一旦 eject 了以后，這種方案就行不通了，因為無法啟動項目了。

在官方的 issue 下面，有人反映了同樣的問題：https://github.com/ant-design/ant-design/issues/17933

但是我照著有人提供的方案，去解決這個問題，都不生效。

這就好像是一個死鎖一樣，我需要修改 eslint，就必須要彈出配置項，但是我一旦彈出了配置項，就無法使 antd 的 css 按需加載了。

怎么辦呢？還好我在官網(wǎng)上看到了這篇文章：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 變量而已，至于其他的細節(jié)部分，倒不是我太過在意的地方。

畢竟 create-react-app 默認配置的 eslint 規(guī)則很寬松，你完全可以在編輯器里面配一種自己喜歡的 eslint 規(guī)則，來規(guī)范你的代碼，這其實不影響到你代碼的編譯。

但是我必須要引入全局變量，以加載一個第三方的框架，而 eslint 默認推薦的 global 卻不能運用上去，這就令人頭疼了。

但是默認 Windows 是一個全局變量，而第三方框架的全局變量肯定是會掛在到 Windows 對象上去的，我調(diào)用全局變量的時候，通過 Windows 對象來調(diào)用，就避免了默認 eslint 識別到為定義的變量的尷尬情況了。

其實以前寫代碼沒用 react 框架的時候，很多時候也是這樣用的。

但是自從接受了 vue、react 這種前端工程化寫代碼的方式以后，反而就忘記有的問題也可以采用以前的方案來解決了。

而為了按需加載，我只得重新用 create-react-app 生成一個新的項目，然后將舊的代碼移植過去。
雖然有點復雜和折騰，但是好歹有了可以一舉兩得的解決方案吧。