前言
首先這是一個react17的專案，包含專案中常用的路由、狀態管理、less及全域性變數配置、UI等等一系列的功能，開箱即用，是為了以後啟動專案方便，特地做的基礎框架，在這裡分享出來。
這裡寫一下背景，我最開始是node8的環境，因為react17需要至少node14的版本，我就直接升級到16了，關於node升級遇到的問題，我有另一篇文章專門羅列步驟和可能出現的問題及解決方案，這裡就不多說。連結在這 https://www.cnblogs.com/pengfei-nie/p/15701138.html
下邊是目錄，因為每個專案不一樣，比如less、antd就不是必須的，大家可以直接點目錄跳轉自己想看的內容
另外，先貼一下程式碼，這是我的GitHub專案地址 點這裡，看原始碼
以下流程是從零搭建，如果某些模組你已經有了可以直接跳過。
目錄
先解除安裝老版本腳手架，然後安裝最新版本的，然後建立我們的應用，指令在下邊了。npx是npm附帶安裝的，可以執行二進位制檔案。建立好專案，我們就可以開啟專案，看一下效果了。
npm uninstall -g create-react-app
npm install -g create-react-app npx create-react-app react-cli17
然後安裝less，我習慣使用less，如果不需要的可以直接略過。不過這個專案我會配置全域性的樣式，還會配置全域性的less變數。這個可以說是必須的，一個系統得有統一的風格，特別是色調和文字大小，有全域性變數，後期維護或者做擴充套件都很方便，這也是良好的習慣。
下邊是安裝less相關包的指令
npm install less less-loader --save
npm i style-resources-loader
現在執行eject指令，暴露出專案的配置檔案，然後安裝proxy本地服務代理依賴，官方支援代理，但是功能不多，用這個做多服務轉發，socket轉發等方便很多。關於代理，在src目錄下建立setupProxy.js檔案，不需要引入，系統會自動攔截轉發的。具體程式碼這裡不貼了，看原始碼吧。
完善下目錄結構，提前把常用的檔案目錄都建好，後面就不用一一新增了，看下圖。
修改埠號，scripts\start.js 檔案下第47行，將原來的埠號改成你想要的。改埠號方法很多，但是我們既然選擇eject了，那就在start.js檔案裡面修改。
配置less，config\webpack.config.js 檔案 74行 和 541行，就是在sass的後邊增加less的解析、全域性樣式檔案的引入，確保你可以在專案任何地方使用你的less變數。這個行數是參考我的原碼來的，至於具體每一行程式碼什麼意思，我就不在這具體說了，只說配置，先把架構搭建起來，涉及東西太多，不明白的自己慢慢學。
配置便捷路徑，config\webpack.config.js 322行，就是配置一個便捷路徑，不需要按照相對路徑一層層寫下去，直接利用根路徑和path模組，前端常規操作。
npm run eject // 顯示配置檔案 npm install http-proxy-middleware --save // 安裝代理中介軟體
四、安裝路由react-route-dom
先安裝路由。這裡大致解析下App.jsx檔案，看圖片。react升級後，相關的依賴也都做了升級，增加了對應的hooks支援。標籤更是變化非常大，Routes就是以前Switch，還有其他標籤也變了，比如重定向、根標籤等等，這裡也不多說，查文件即可。需要注意下按需載入，首次用到某個模組時，才會載入，使用suspense會自動執行載入動畫，要不然會閃屏。當然後續再開啟就不會有載入動畫了。
結構方面，我做了layout佈局元件，這個也是根據專案需要做修改，比如登陸、註冊肯定不會和業務邏輯頁面用同樣的佈局，所以我認為登陸、首頁等屬於靜態路由不會變的，然後其他都屬於業務邏輯頁面，進行了路由巢狀。其實這裡只是舉了簡單的例子，有一個路由的區分。不想把404還有其他一些情況寫進來，畢竟每個專案場景不同。
src\layouts\BasicLayout.jsx 佈局檔案渲染，這裡渲染業務邏輯路由，我寫了個遞迴，路由和選單都在route檔案維護就好。
npm install --save react-router-dom
安裝狀態管理和http請求。src\utils\request.js 這是封裝的axios檔案，對token新增，報錯統一處理等做了處理，程式碼有註釋。 src\store\index.js 檔案是redux的配置注意分模組，action注意都加上模組名，做區分，避免action同名，同時觸發。程式碼有註釋。
npm install axios 做http請求的 npm install redux 狀態管理的 npm install react-redux 更方便的全域性使用redux npm i redux-thunk redux中介軟體，解決非同步請求問題的
六、安裝antd
然後安裝UI庫，我用antd習慣了，這裡還是用它，這裡大家隨意，畢竟UI庫很多，用別的的直接跳過。antd的引入本來就是按需載入的，最新版本icon為了迎合按需載入，也單獨抽離出來了。最新版放棄了moment ，改用dayjs。鑑於此，那我們專案中也使用dayjs，也得安裝一下。不過這個包用法和moment一樣，體積小特別多，確實更好。
這裡注意修改 package.json 的babel配置，見下圖，按需載入樣式檔案的。這個antd官網詳細有說明
npm i antd --save npm i --save @ant-design/icons npm install babel-plugin-import --save--dev npm i dayjs
封裝可複用元件，型別檢查是必須的，因為我沒有使用typeScript語法，所以使用props-types。然後這個專案我做了一些簡單邏輯，比如登陸，比如許可權校驗，這些都是專案中必需的，為了方便，安裝了mock，做了模擬資料，mock也是非常方便的工具，裝了不吃虧。
npm i prop-types 做型別檢查
npm install mock 安裝mock，做資料模擬
八、編寫頁面邏輯
src\components 寫了一些全域性元件，src\views\Report.jsx 是一個使用元件做的增刪改查介面。程式碼邏輯我就不多說了。我在另一篇部落格做了一些元件封裝，還有useState useEffect等hooks函式的使用講解，感興趣的可以去那看 連結在這： https://www.cnblogs.com/pengfei-nie/p/15719569.html
九、總結
這篇文章主要是對我GitHub上react17專案框架的一個搭建說明。記錄一下這個框架是怎麼一步步搭建起來的。當中涉及的知識點很多，畢竟是一個專案的骨架，所以主要講怎麼做，至於每個模組程式碼怎麼用，那寫起來篇幅就太大了。不過這也是一條很好的學習之路，順著這套搭建流程，將這些技術點一個個攻克還是很有必要的。
希望這篇文章能對你有所幫助！