基於 React 的應用構建總結
在這篇文章中，我總結了在汽車之家基於 React 構建應用時所遇到的一部分使用問題。希望能幫助到一部分同學。
初始化
不管是 React 技術棧，還是現在很流行的 Vue，官方社區都已經提供了 CLI 工具，供大家開箱即用。而且個人感覺也是最快捷省事的方式，免受 webpack 等配置的困擾，實現關注分離。React 官方提供的 CLI 叫做 create-react-app，以下簡稱 CRA，使用過組內腳手架（create-autofe-app）的會感覺比較熟悉。
在終端中運行如下命令，即可迅速初始化一個項目：
之後就可以自定義自己的目錄結構了，想要了解 , 可以閱讀一下。
引入靜態類型檢查
我們也可以在初始化時就構建基於 的 react 應用：
實現靜態類型檢查，也可以使用 Flow，可以自行引入學習，官方也推薦使用 和 替代 .
定製化
使用 CRA 構建的應用只提供了基礎功能，如 sass/less，mobx/redux，UI 庫的編譯打包都需要自己配置，以下是常見的 3 種處理方式。
方法1: Eject
最早常用的方法就是用 CRA 文檔提到的運行 , 把位於 node_modules 中的 包中的配置暴露到全局，且該命令不可逆，需要慎重對待；之後你就可以按需配置 Webpack, Babel, ESLint 等了。這就需要對構建工具有一定的功底了，進一步提高門檻，且該方法可維護性較差，適用單一的項目。
方法2: 定製化 CRA
進一步可維護性的方案就是 fork 一份 CRA，然後根據場景需要定製化自己的 腳本。不止可以定製 webpack，而且可以定製化 react 模版，如初始化生成的 App.js，定製程度更高，維護性也更好。這裡有篇博文，可以參考閱讀一下，但需要對 Node 和 Npm 的使用更精通。
方法3: react-app-rewired
該方法是在不要 eject 和 fork react-scripts 的情況下，通過 merge 的方法實現覆蓋 CRA 的 webpack 配置。官方提供 CLI 的初衷就是無配置化，使用戶更專註於應用業務本身。
在這裡你只需要使用 CRA 初始化你的項目，再通過運行 ，把該包添加到開發依賴。
之後在根目錄新建一個 文件，在該文件，書寫自己的配置進行覆蓋：
再修改 package.json 文件的 scripts 欄位：
我的項目也配置了 sass，結合起來就是：
詳細的文檔請移步 Github。文檔中羅列了社區維護的常用 plugins 和 loaders，在這裡可以找到 MobX 的配置等，而且 antd 這個 UI 庫也是通過這種方式實現按需載入的。
以下是我 antd 和 MobX 的配置：
業務環境配置
在做基於 React 的項目時，就會涉及到開發/測試/生產環境，且依賴的變數可能各不相同。這時就需要用到 文件。
常用本地開發文件，需要再根目錄新建 文件, 對應到的命令是 。 React 應用業務代碼用到的環境變數，可以在這裡配置，遵循 前綴規則：
之後在業務代碼中，就可以通過 獲取該變數；
部署上線的時候就會用到 文件，對應到的命令就是 ; 但是部署也可能區分測試伺服器和生產伺服器，並且依賴的變數不同，不管部署是否基於 jenkins 還是線下文件交流，就需要用到 shell 級別的變數：
該變數會覆蓋掉對應的 文件中的值。
代理
前後分離之後經常遇到的問題就是介面跨域和需要獲取用戶的 。 這時就需要在 package.json 文件中配置一個參數 ：
當然電腦上也需要用host管理工具配置好正確的 IP 指向：
之後在調用介面的時候使用相對路徑請求即可。
再就是有的介面需要用到 ，用 當域名啟動的服務無法獲取之家的 ， 啟動的服務自動使用 。這時我們可以在 文件中配置：
然後本機用的 host 管理 App（如：switchhost）需要正確配置：
這時再運行 啟動的服務就是用該域名了。
80 埠
如果介面服務限制必須使用 80 埠，可以在 package.json 配置：
之後，在終端種使用 命令運行：
其他問題
使用 React 做的項目可能是一個獨立平台，也可能只是傳統業務中的一個小頁面，這時可能會遇到靜態文件上傳 CDN 的問題。打包應用時會基於 public 文件夾下的 index.html 生成一個目標 html 文件，該文件有對 js 和 css 的引用，如果你想在打包時就生成正確的 CDN 地址，可以在 文件中配置 參數：
結語
該文沒有涉及 Router 等的使用問題，與實際業務處理相關度也不高，但希望這篇文章能幫助到一部分同學，有任何問題請聯繫我，共同進步，happy coding。
TAG:車前端 |