react開發框架搭建方案一條龍create-react-app+mobx+axios+antd+less+react-router+webpack+nginx

寫在前面：

• 如下create-react-app如下簡稱CRA
• 本文均使用yard進行包安裝及項目啓動和打包，喜歡使用npm的同窗，可自行換成npm命令
• 本項目實現了基於CRA2.x搭建的基本項目框架，並實現了一個仿騰訊天氣的頁面
• 本文的基礎框架搭建可用於基於企業級後臺管理系統搭建
• 筆者搭建環境macOS Mojave10.14.1，node版本8.12.0，IDE是VSCode
• 前期準備須要node環境，node環境準備請自行搜索，這個不在本文說明範圍內
• 若是是CRA或者React初學者，請務必在GitHub上clone源碼對照文章進行學習
• 本項目旨在記錄CRA2.x企業級項目框架搭建過程，順便在閒暇時間寫了一個仿騰訊天氣的頁面，主要爲了實際在項目中運用antd，mobx和echarts-for-react這三個很重要的庫的使用
• 本文全部環節都有註明必學仍是選學，有基礎的讀者權當參考，若無基礎的讀者，請無比在GitHub上clone代碼，對照文章進行學習（再次強調！）
• 本項目GitHub地址
• 本項目DEMO (ps.項目最主要的bug在於服務器，由於天氣預報系統，用到了ip定位，我在開發階段使用了proxy配置的代理，沒有問題，可是掛載到nginx服務器上的時候，每次默認經過ip定位，都定位到北京去了，我查閱了不少資料，有解決辦法，可是須要後端配合，可是個人後端又是第三方的api，這個問題感受有點無解...若是有解決辦法的同窗或者有其餘交流想法的同窗，歡迎給我提issues，或給我留言，你們一塊兒交流)
• 由於第三方api有訪問流量限制，若是訪問過量，可能存在頁面沒法打開的狀況，若是沒法打開demo了，請及時與做者聯繫

1. 開啓CRA之路 （必學步驟）

意義說明：這是項目搭建準備的基礎中的基礎 腳手架工具 create-react-app，CRA詳細介紹能夠查看 Github CRA連接 使用腳手架的步驟： npx create-react-app my-app cd my-app 確認項目運行沒有問題 yarn start 打開自定義webpack配置 yarn eject or npm run eject 能夠看到多了幾個文件，而且package.json裏面多了不少內容，這些就是CRA內部封裝的配置，暴露出來了，這個操做是不可逆的，這個操做的意義就在於咱們能夠自行修改webpack配置以及全局變量等配置，這對於一個企業級開發框架來講，是必要的

到這裏，咱們的第一步就完成了，是否是很簡單呢？

2. cross-env及全局變量配置 （必學步驟）

意義說明：這節內容是爲了解決跨平臺開發和靈活應對不一樣上線需求的（測試環境、預發佈環境、正式環境等） （1）cross-env，用於解決統一mac和windows項目運行的問題，大多數狀況下，在windows平臺下使用相似於: NODE_ENV=production的命令行指令會卡住，使用cross-env可讓不一樣平臺使用惟一指令，無需擔憂跨平臺問題 安裝cross-env yarn add cross-env --dev 配置package.json以下

說明：安裝好cross-env後，只須要在每一個命令行前加上cross-env便可，我這裏有三個命令，start不用說，就是運行開發環境，"build:test"和"build:production"是幹什麼的呢，另外cross-env後面跟的一大堆參數是什麼意思呢，這個我會在下面進行詳細說明 （2） 配置全局變量文件 全局變量文件，一般，咱們會把api請求的服務器地址，某些固定請求前綴，特定appId，發佈地址，api服務器地址，等相關參數寫到全局變量中，咱們經過全局變量文件，能夠很方便的達到在開發和打包各個環境時，區分開不一樣的全局變量（好比開發環境請求的api前綴是http://xxxx-test.xxx，而正式環境是http://xxxx-pro.xxx），在企業級前端開發項目中，全局變量文件是必須的

個人項目就區分了三個全局變量，包括.env.development .env.test .env.production，分別用於表示開發環境，測試環境打包，正式環境打包

• 配置 全局變量文件必須以.env.xxx的格式命名，放置在項目根目錄下，經常使用的就是development（開發環境），test（測試發佈環境），production（正式生產環境）

  

• 文件格式：".env.xxxx" 這裏的xxx能夠自定義想要的名字，可是一般都是上面這三個，如今咱們回到package.json中看，也就是上面那張「cross-env配置截圖」，在scripts中每一個命令中有一個參數就是RECORD_ENV=xxxxx，這個xxxxx就是對應的全局變量的後綴文件名，表示在執行start命令的時候RECORD_ENV環境是development，其餘同理，接下來就修改根目錄下config文件夾裏面的env.js文件，這裏面就有咱們讀取全局文件的代碼

  這裏須要咱們將const NODE_ENV = process.env.NODE_ENV; 改成 const NODE_ENV = process.env.XXXX;，這裏的XXXX就是咱們在package.json的scripts中，每條運行命令的那個區分環境的參數，我用的就是RECORD_ENV

  

• 全局變量文件中變量命名格式： 必須是「REACT_APP_XXX」這樣的格式，對應的各個不一樣環境下的全局變量文件各自命名各自所需的全局變量，寫好每一個文件中的所需變量後，咱們就完成了全局變量配置

  

特別說明1： 關於第二步cross-env及全局變量配置，這一步不是運行基礎框架所必須的，由於通常來講我的項目不會存在多環境下，環境變量不一樣的問題，可是對於企業級項目框架搭建來講，這個配置倒是必須的，由於後端必定會存在測試環境，開發環境的區別

特別說明2： 關於內置環境變量的說明：咱們修改了env.js中的配置，細心的同窗確定會發現處處都出現了這個變量「NODE_ENV」，下面我就簡單說明一下CRA的內置的環境變量 create-react-app內置有兩個環境變量，PUBLIC_URL和NODE_ENV PUBLIC_URL是靜態資源的發佈路徑，在public/index.html有使用，這個默認值是''，須要本身進行配置 NODE_ENV有三個值，分別對應以下: npm start => development npm test => test npm run build => production NODE_ENV的值不能手動進行覆蓋，因此須要咱們手動設置一個新的環境變量名稱，而後在scripts運行命令的時候，經過指定環境參數來指定當前的環境變量文件，這就是咱們上面「修改env.js文件配置」截圖所作的事情

3. 配置ESLint和prettier （選學步驟）

意義說明：這節內容是爲了配置團隊開發的時候的代碼規範，做爲一個企業級的前端項目架構，團隊協做開發是必不可少的，但若是認爲沒有必要的同窗，也可直接跳過本章節，代碼規範檢測及配置，並非項目運行所必須的配置

首先，咱們須要安裝prettier，yarn add prettier --dev

prettier是業內經常使用的格式化代碼的工具庫，筆者用的IDE是VSCode，VSCode有默認的格式化代碼的規範，可是沒有prettier好用，也能夠在VSCode的插件庫庫裏面直接安裝prettier插件

關於ESLint，咱們的CRA框架默認配置，已經預裝了ESLint了，咱們只須要選擇想用的規則便可，這裏我選的是這裏咱們使用airbnb的標準代碼格式規範，業內比較經常使用的就是airbnb和standard這兩個規範，具體相關知識，這裏不作贅述，讀者能夠自行搜索比較

安裝airbnb規則插件yarn add eslint-config-airbnb --dev airbnb是咱們主要的代碼檢測規則 安裝prettier規則插件yarn add eslint-config-prettier --dev eslint-config-prettier能夠解決eslint和prettier對於同一個錯誤屢次報錯的問題 安裝prettier在eslint下的插件yarn add eslint-plugin-prettier --dev eslint-plugin-prettier會讓eslint調用prettier對你的代碼風格進行檢查

配置ESLint規則文件 eslint --init 能夠根據嚮導一步一步創建配置文件，也能夠直接在根目錄下創建幾種配置文件的格式，我經常使用的就是.eslintrc.json，配置文件詳細內容，請讀者自行搜索，這裏我只說明我配置的

.eslintrc.json 放在根目錄下 用於屏蔽不須要的eslint規則 .eslintignore 用於屏蔽不須要eslint檢測的文件夾，通常是node_modules，webpack配置文件等，這些文件夾是不須要eslint檢測的

eslintrc.json具體內容配置說明：

.eslintignore具體內容配置說明：

最後，使用各大IDE的讀者們，應該如今全部的IDE都有了ESLint和prettier的插件，這些插件都是依賴於node_modules裏面的源碼庫的，插件只是IDE集成了這兩個庫的一個使用的入口，建議都把這兩個庫的插件安裝好，而後重啓IDE

到這裏，咱們關於ESLint和prettier插件的配置就完成了

特別說明： 禁用規則：由於airbnb是比較嚴格的規範，可是仍是有很多規則，其實在實際開發中，會存在很多的麻煩的，我屏蔽瞭如下規則，具體規則意義能夠自行查閱相關文檔 "prettier/prettier": "error", "import/no-unresolved": 0, "react/forbid-prop-types": 0, "prefer-destructuring": 0

4. 安裝lodash （選學步驟）

**意義說明：**若是不熟悉lodash的同窗能夠跳過本步驟，lodash是業內較爲經常使用的一個JS庫，裏面包含了很全面的封裝方法，但其實大部分人實際開發的時候，用JS的內置方法也基本都能知足需求了，用lodash只是圖一個簡潔方便，因此就是筆者我的比較喜歡用lodash的清爽直接，因此安裝了 安裝 yarn add lodash

5. 安裝less相關，webpack配置less支持 （選學步驟）

意義說明：這節內容是爲了給項目添加less支持，咱們在實際開發中，一般都是如下圖這樣來使用less樣式的，對於less不瞭解的讀者，能夠自行學習一下less，企業級的項目架構中，確定都是使用less或者sass的，筆者一直接觸的都是less，sass的配置還請讀者自行研究，這裏咱們只講less的配置

首先安裝less模塊支持 yarn add less --dev yarn add less-loader --dev

而後分別在根目錄下的config/webpack.config.dev.js和config/webpack.config.prod.js文件中配置

config/webpack.config.dev.js文件

• 第一步修改

  

  注意：不少相關文檔沒有 javascriptEnabled: true這句代碼，是由於less在3.x版本及以上，會須要加上這句話，不然會報錯，除非安裝less3.x如下的版本

• 第二步修改

  

  注意：這一步修改的意義在於處理node_modules不須要開啓css模塊化，也就是咱們上面的貼圖「less在項目中的使用」這樣的使用，因此有這樣一句，include: [/node_modules/]，而後處理本地本身開發的代碼的時候，須要加上css模塊化配置，不然沒法使用import styles from 'xxxx'這樣的用法，因此下面處理本地less的時候，加上了exclude: [cssModuleRegex, /node_modules/]，這個cssModuleRegex是CRA2.x默認存在的配置，不用動就是了

config/webpack.config.prod.js文件 這個文件表示打包時候運行的webpack配置，和config/webpack.config.dev.js略有不一樣，可是添加對less支持這塊的配置，是如出一轍的配置，這裏就不贅述了

6. 安裝antd，配置antd按需加載，安裝mobx mobx-react，修改babel配置 （必學步驟）

意義說明：這節內容是爲了添加antd的框架，mobx mobx-react，並添加按需加載配置，關於這塊內容，官網有更爲詳細的介紹，讀者也能夠參考官網的說明antd官網 ，另外本步驟會詳細說明一下CRA2.x已經預裝到了babel7，有不少配置和之前不同，建議仔細閱讀本步驟 必學步驟 安裝antdyarn add antd 安裝antd按需加載必備組件yarn add babel-plugin-import --dev 安裝mobxyarn add mobx 安裝mobx-reactyarn add mobx-react

首先展現個人.babelrc文件配置 CRA默認的babel配置是放在了package.json裏面，這裏我將package.json裏面的babel配置刪除，單獨在根目錄下創建了一個.babelrc文件，我的以爲單獨配置會比較清晰一些

babel-plugin-import實現按需加載 如上圖展現，在plugins中添加[ "import", { "libraryName": "antd", "style": true } ],

添加對ES7修飾器語法支持 如上圖展現，在plugins中添加["@babel/plugin-proposal-decorators", { "legacy": true }]，修飾器用法是mobx的用法中，最簡單直觀的，推薦使用mobx的框架都應該使用修飾器的用法

多說一句1 若是你的babel版本是7如下，name就須要先安裝 yarn add transform-decorators-legacy --dev，而後在plugins中添加配置transform-decorators-legacy便可，可是CRA2.x已經將babel升到了7了，若是你還按照舊的配置方法，會有以下報錯 解決babel 7報錯問題 CRA2.x安裝的babel版本已經達到7以上了，使用transform-decorators-legacy會有如下報錯 The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the ‘decorators-legacy’ plugin instead of ‘decorators’ github.com/mobxjs/mobx…

多說一句2 如上面所說，可能有的文章是CRA1.x的版本，會說須要npm i transform-decorators-legacy來支持對修飾器的用法，但基於CRA2.x搭建的框架其實不須要了，由於CRA2.x已經預裝到了babel7，babel7對修飾器的支持包已經換爲了「@babel/plugin-proposal-decorators」這個包，配置也改爲這樣的配置["@babel/plugin-proposal-decorators", { "legacy": true }]，這裏你能夠本身試一下，單獨開一個文件，yarn add babel-preset-react-app，對，關鍵就是這個babel-preset-react-app，這個是CRA預裝的「一條龍」包，裏面包含了大量可能用的到的插件包，在CRA建立你的項目的時候，就已經給你裝好了的，其中就已經包括了咱們須要在.babelrc裏面添加的@babel/plugin-proposal-decorators 對修飾器支持的包，這也就是babel配置裏面的第一句"presets": ["react-app"]，這裏的意思就預裝使用babel-preset-react-app這個包的內容

這個庫已經涵蓋了很全面的babel配置插件了，這個庫把咱們經常使用的好比@babel/preset-env（適配各版本的babel轉換） @babel/plugin-proposal-class-properties（對class語法的轉換） @babel/plugin-transform-runtime（運行時轉換） 等等都已經封裝進去了，因此咱們這裏惟一須要添加的支持就是對修飾器的配置

而後有的讀者可能就有疑問了，既然babel-preset-react-app預裝包已經包含了咱們須要用到的@babel/plugin-proposal-decorators，那麼爲何咱們還要再plugins裏面添加這一句話呢，是由於在babel-preset-react-app的源碼中，對於@babel/plugin-proposal-decorators的開啓有一句代碼，是必需要傳入"typescript:true"這句配置，這裏我理解，可能對於使用typescript的項目，在babel中加入這樣的配置，"presets": [["react-app",{typescript:true}]]纔會開啓修飾器支持的包，但事實上我已經試過了，運行項目仍是會報錯，這裏就要說到正確的配置["@babel/plugin-proposal-decorators", { "legacy": true }]這裏來了，我理解的"legacy": true，就是舊版本的修飾器支持，而新版本的修飾器庫還不支持mobx的用法，因此若是不添加"legacy": true，則仍是會報錯。

正確解決修飾器使用問題，及拓展說明 咱們的報錯內容有一個關鍵字「decoratorsBeforeExport」，decoratorsBeforeExport這個參數是最新的修飾器插件所必須的一個參數，但官方也還在社區徵集意見到底採用decoratorsBeforeExport:true or decoratorsBeforeExport:false，因此現階段各位同窗只須要使用legacy:true便可，這個是babel官方說明 其實這個參數的true or false就是兩種格式的爭論，有興趣的同窗能夠圍觀，關於這個參數的詳細討論連接在這裏

7. react-router4.x使用及路由按需加載 （必學步驟）

安裝 yarn add react-router-dom react-router-dom是基於react-router的，比react-router多了一些DOM類的組件，好比 這樣的組件，瀏覽器開發直接安裝react-router-dom便可

關於react-router4.x的詳細用法，又能夠單獨寫一篇文章了，這裏我不作詳細的講述，本文的主旨是項目架構，這裏我只貼出本身的寫法，寫一些簡單的用法，看貼圖不清楚的同窗，能夠把項目clone下來仔細查看

index.jsx文件

app.jsx文件

routers.jsx文件

按需加載（重點，路由的按需加載是前端優化的必須步驟，按需加載，顧名思義，頁面在加載時只請求當前路由所需的資源，而不會所有路由資源都給請求下來，若是不配置按需加載，在後期項目龐大以後，會很是影響用戶體驗）

按需加載的配置文章，在網上也有不少，這裏我只介紹兩種，是我我的以爲比較輕量簡單的兩種方法，方法不止這兩種，讀者可自行搜索，詳細瞭解原理

• react-loadable（按需加載的一個支持庫） 安裝yarn add react-loadable 使用 import Loadable from 'react-loadable'; const MineItem = Loadable({ loader: () => import('./pages/mine'), loading: MyLoadingComponent }); 截圖：

  

• 自定義Bundle.js組件，路由組件用這個Bundle套在外層 截圖：

  

  

8. 安裝axios （必學步驟）

意義說明：axios和fetch是業內經常使用的兩個api請求庫，筆者都有用過，總的來講axios更簡單輕量，具體的用法和比較，請讀者自行思考了 安裝yarn add axios axios的基本使用，請讀者自行查看axios中文文檔，這裏我只提一個我項目中用到的配置，就是axios的攔截配置，axios能夠攔截請求，返回的數據，提早作一些處理，好比：

配置好axios攔截器後，直接在在index.js中導入這個攔截器文件就行了

9. 圖表庫 （選學步驟）

意義說明：企業級項目中，不可能不用到可視化圖標的庫的，這裏做爲我的學習，能夠不須要安裝，可是筆者的框架內實現了一個仿騰訊天氣的頁面，用到了echarts-for-react，這個讀者根據須要，自行判斷是否須要 安裝yarn add echarts-for-react

多說一句 關於圖表庫，不作多的贅述，業界內用到圖表庫的時候，最經常使用的兩個就是d3和echarts，echarts-for-react只是這個做者基於echarts封裝了一個統一的react組件，api的使用，就直接查看echarts官方api文檔便可，沒有任何的變化，關於d3和echarts的比較使用，能夠查看這篇文章，使用者可自行比較 echarts官方文檔 echarts-for-react，

10. 前端開發環境的跨域代理配置 （必學步驟）

意義說明：跨域是每一個前端工程師必備的基本功之一，對於跨域筆者不作多的介紹了，企業級項目的跨域多數都是採用的CORS跨域方法，這個主要的配置是在服務端，而筆者這裏介紹的是一種在前端進行跨域的方法，像筆者這樣的我的項目搭建，又用的是第三方的api，服務端的設置我確定是改不了了，因此就用的前端代理的方法，配置方法很是簡單

只須要在package.json中加上"proxy": "http://xxxxxx"便可，xxxx就是代理服務器的地址

多說一句 筆者使用CRA1.x搭建項目的時候，proxy還能夠像下面這樣配置

這樣配置的好處是能夠多api服務的跨域，好比定位api用的是百度的，其餘api又用的是高德的，就能夠採用這樣的配置，可是CRA2.x搭建後，我這樣配置了，**運行的時候給我報錯，提示我proxy只能是一個字符串，**截止目前，我暫時尚未找到解決的辦法，不過由於我這個項目只用到了一個地址的第三方api，因此運行個人項目，也不存在這個問題，而後實際開發中，多數都是服務端使用CORS跨域，可能也不太會遇到這個問題，這個我後面若是解決了，會更新到文章中的

11. nginx準備 （選學步驟）

意義說明：這節內容是屬於折騰服務器的範疇了，我不許備在這篇文章內進行詳細的介紹，個人下一篇文章，會介紹我折騰nginx服務器的正確步驟以及踩坑點，下面列出的是一些須要配置的東西，有興趣的讀者能夠自行在網上查找資料學習 系統：服務器系統準備 centos7.2 nginx相關安裝（不少依賴庫） nginx反向代理設置（用了第三方的api，必需要配置nginx的反向代理，不然api啥都訪問不到，若是是本身寫的後端，能夠配置使用CORS跨域，就不用配置反向代理了） nginx gzip壓縮配置（大幅增長頁面加載速度，啓用gzip將個人應用從15s減小到4.x秒，這裏又提到上文所說的路由按需加載，路由按需加載配置和gzip壓縮，是前端工程師必須知道或者瞭解的兩個優化方法，能夠大幅加快頁面加載速度）

寫在後面

筆者實現的仿騰訊天氣的頁面目最主要的bug在於服務器，由於天氣預報系統，用到了ip定位，我在開發階段使用了proxy配置的代理，沒有問題，可是掛載到nginx服務器上的時候，每次默認經過ip定位，都定位到北京去了，我查閱了不少資料，有解決辦法，可是須要後端配合，可是個人後端又是第三方的api，這個問題感受有點無解...若是有解決辦法的同窗或者有其餘交流想法的同窗，歡迎給我提issues，或給我留言，你們一塊兒交流成長

最後，如若文章有任何錯誤或者誤導讀者的地方，請當即與做者聯繫，這是做者第一次發框架搭建性質的指導文檔，不免存在遺漏和模糊不清的地方（亦或是寫了太多做者本身理解的東西了，讓讀者看的比較迷茫😓😓😓😓），都請你們多多見諒。