輕鬆開發企業級中後臺專案，順手掌握工程化的react開發架構
阿新 • • 發佈：2018-12-18
mobx_antd_react
寫在前面
使用 webpack4.xx，區分開發環境和生產環境，開發環境打包編譯超快，生產環境的優化基本都有。 mobx 做狀態管理，靈活方便 antd 做 ui 易於維護 axios 請求 api mock 資料前端獨立開發
寫得不容易 大家喜歡的話隨手給個星，感謝。
檔案目錄
├── node_modules: 模組資料夾 | └── ... ├── dist: 打包生成目錄 ├── src: 開發目錄 | ├── components: 公共元件 | ├── layouts: 佈局元件 | ├── libs: 全域性工具函式 | ├── mocker: 模擬介面 | ├── pages: 專案view | | ├── myAgent: 我的代理模組 | | ├── operationLog: 日誌模組 | | ├── orgAdmin: 我的機構模組 | | ├── styles: home/sign的樣式 | | ├── Home.js: 專案骨架 | | └── SignIn.js: 登陸模組 | ├── static: 靜態檔案 | ├── store: mobx store檔案 | ├── setting: 配置檔案 | | ├── api.js: API配置檔案 | | ├── consts.js: 常量檔案 | | └── routeAndPermissions.js: 許可權/路由配置 | ├── index.ejs: 模版檔案 | └── index.js: 入口檔案 ├── .babelrc babel配置檔案 ├── .eslintignore eslint忽略 ├── .eslintrc.json eslint ├── .gitignore git忽略檔案 ├── env.js 開發變數配置 ├── jsconfig.json 程式碼相容裝飾器寫法 ├── package.json 專案依賴 npm ├── README.MD 專案資訊 ├── webpack.config.js webpack配置檔案 └── webpack.dll.config.js dll分離公共庫 複製程式碼
技術棧
- react 16.3xx
- react-dom
- react-router 4.xx
- mobx 資料流
- webpack 4.xx
- ESLint 程式碼規範
- axios 非同步請求
- antd ui
- mock 模擬介面資料
開發環境
生產環境
- npm run build
專案理解指南
- 此處先了解專案如何啟動並如何執行所以請先忽略 webpack 等工具
- 首先請看明白之前的“檔案目錄”
- 看懂專案主要是看懂專案骨架
- /src/index.js 先看專案入口
- /src/pages/Home.js 主檔案骨架 進入檔案看註釋（結合/src/settings/routeAndPermissions.js 看）
- /src/settings/routeAndPermissions.js 配置檔案 （結合/src/pages/Home.js 看）
- /src/pages/myAgent/index.js 專案子模組 進入檔案看註釋 （結合/src/settings/routeAndPermissions.js 看）
待優化項
- 許可權/路由/目錄 三者之間專案對映 簡化配置
- mobx 效能優化
- 編寫單元測試
- 非同步請求優化
未來展望
- 指令碼生成元件模組以及測試用例
- 離線優先
注意
- windows 平臺下“git clone”專案可能會出現丟失 src 目錄下部分程式碼
- windows 平臺下可以通過 Download Zip 形式下載
- 解壓後部分“import”檔名或出錯，通過“npm i” -> "npm run dev“ 會丟擲所有錯誤檔案目錄定位
- 找到修改為正確的檔案目錄即可
作者：Tianlikai 連結：https://juejin.im/post/5b715c006fb9a009b628faaa 來源：掘金 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。