輕鬆開發企業級中後臺專案，順手掌握工程化的react開發架構

Tianlikai發表於2018-08-13
React架構

mobx_antd_react

中後臺 SPA 完整專案腳手架。 原始碼地址: github.com/Tianlikai/m…

輕鬆開發企業級中後臺專案，順手掌握工程化的react開發架構

寫在前面

這是一個不斷迭代的專案，與時俱進的中後臺專案。

如果對你的專案搭建有幫助的話，隨手給個星，感謝。

特點

  • webpack 一個適用與真實專案開發配置
  • Router 做了基本許可權處理，跳轉，以及一個更好的組織專案模組的路由配置函式
  • mobx 處理資料流，簡單易用
  • axios 基於模組組織 api 介面
  • 基於 antd 提供了表單，表格，上傳的高階元件。統一了以上場景的公共業務
  • 基於路由和元件的按需載入模組

檔案目錄

├── node_modules:                   模組資料夾
|   └── ...
├── _mocker_:                       mock介面資料
├── build:                          webpack配置檔案
|   ├── env:                        環境變數配置
|   ├── index:                      呼叫webpack入口檔案
|   ├── webpack.base.config:        webpack通用配置
|   ├── webpack.dev.config:         webpack開發配置
|   ├── webpack.dll.config:         webpack公共依賴庫打包
|   └── webpack.prod.config:        webpack生產配置
├── dist:                           打包生成目錄
├── src:                            開發目錄
|   ├── api:                        API配置，axios封裝
|   ├── components:                 公共元件
|   ├── hoc:                        公共業務
|   ├── layouts:                    佈局元件
|   ├── routes:                     專案路由
|   |   ├── ErrorPage:              錯誤導航頁面
|   |   ├── Home:                   主路由模組
|   |   ├── Login:                  登入頁面
|   |   └── index.js:               路由配置檔案
|   ├── settings:                   配置檔案
|   |   ├── const.js:               常量檔案
|   |   ├── headConfig.js:          頂部模組配置
|   |   ├── permissions.js:         許可權配置
|   |   └── sideMenu.js:            目錄
|   ├── static:                     靜態檔案
|   ├── store:                      mobx store檔案
|   ├── utils:                      工具函式
|   ├── index.ejs:                  模版檔案
|   ├── index.js:                   入口檔案
|   └── style.scss:                 公共樣式
├── .babelrc                        babel配置檔案
├── .editorconfig                   不通作業系統編碼格式統一
├── .eslintignore                   eslint忽略
├── .eslintrc.json                  eslint
├── .gitignore                      git忽略檔案
├── jsconfig.json                   程式碼相容裝飾器寫法
├── package.json                    專案依賴 npm
├── postcss.config.js               postcss 外掛配置
└── README.MD                       專案資訊
複製程式碼

技術棧

  • react 16.3xx
  • react-dom
  • react-router 4.xx
  • react-loadable
  • mobx 資料流
  • webpack 4.xx
  • ESLint 程式碼規範
  • axios 非同步請求
  • antd ui
  • mock 模擬介面資料
  • echarts

開發環境

生產環境

  • npm run build

待優化項

未來展望

  • 非同步渲染

更新路徑

V 2.0.1

  • 修改專案檔案組織結構
  • 修改專案路由配置方式（更好的結合import動態載入，和公共模組拆分）
  • 更新 webpack 配置，將開發和生產環境拆分為更小的 webpack 檔案，通過webpack-merge 合併
  • Api 介面不再統一配置，按照功能模組進行區分
  • 新增 表單，表格，上傳 高階元件
  • 新增簡單的 dashboard 頁面

相關文章