Medux+React+Antd4+Hooks+Typescript開箱即用通用後臺(下)

項目地址：

• medux-react-admin

• 點擊在線預覽

在 上篇  中主要說明了本項目的一些主要思路，如今來看看具體代碼：本項目使用 @medux/react-web-router + antd4 開發，全程使用 React Hooks，並配備了比較完善的腳手架。

安裝及運行

// 注意一下，由於本項目風格檢查要求以 LF 爲換行符
// 因此請先關閉 Git 配置中 autocrlf
git config --global core.autocrlf false
git clone https://github.com/wooline/medux-react-admin.git
cd medux-react-admin
yarn install
複製代碼

以開發模式運行

• 運行 yarn start，會自動啓動一個開發服務器。
• 開發模式時 React 熱更新使用最新的 React Fast Refresh 方案，須要安裝最新的 React Developer Tools。

以產品模式運行

• 首先運行 yarn build-local，會將代碼編譯到 /dist/local 目錄
• 而後進入 /dist/local 目錄下，運行 node start.js，會啓動一個產品服務器 Demo

配置不一樣的運行環境

• /conf 目錄下能夠爲不一樣的運行環境設置不一樣的配置
• /public 目錄下的文件將直接 copy 到發佈目錄
• /conf/xxx/public 目錄下的文件將直接覆蓋發佈目錄

關於腳手架

• 強烈推薦使用 vscode 作 IDE，已經配置好插件及自動 Fix 並格式化，配置文件也已經上傳
• 使用 webpack 4.0 爲核心搭建，無二次封裝，乾淨透明
• 使用 typescript 做開發語言，直接用 babel 編譯，使用 eslint + prettier 作風格檢查
• 使用 Postcss + less + cssModule 構建 css，使用 style + prettier 作風格檢查
• 開發環境須要不少的 dependencies，如無特殊要求，建議使用@medux/dev-pkg，它已經包含了大部分通用依賴
• 運行腳本及 webpack 配置放在/build 中
• mock 數據放在/mock 中，關於 mock 數據後面有詳細說明

改良的 CSSModule

CSSModule 主要用來防止命名出現衝突，可是有一些缺點，好比命名過長、hash 值醜陋、不適合重用、不適合調試、編譯慢等...因此本項目改良了它命名規則與用法：

• 對於使用了 cssModule 的 less 咱們命名爲*.m.less，以此來區別普通的 less，加快編譯速度
• 使用命名空間作約束，沒必要爲每一個 classname 都使用 cssModule 自動生成
• 咱們一般只在 component 或 view 的根節點上使用 cssModule 自動生成，而後以此爲命名空間來約束下級的 css，好比：

// CSS定義
:global {
  :local(.root) { //只有根節點用生成規則
    .g-search {
      padding-top: 0;
      padding-bottom: 0;
    }
    .ant-modal-footer {
      text-align: center;
      padding: 20px;
    }
  }
}

// 在Component中引入
import styles from './index.m.less';

<div className={styles.root}>
 <div class="g-search">
  ...
 </div>
</div>
複製代碼

• 對於每一個 View 來講，由於 View 必定屬於某個 Module，而 ModuleName 是必定不會重複的，因此咱們只須要按照 moduleName-viewName 做爲 cssModule 的生成規則，並以此來做爲命名空間就能保證不衝突，且可讀性很好。
• 一樣對於每一個 Component 來講，咱們以 comp-componentName 做爲 cssModule 的生成規則
• 對於全局公共的 css 咱們使用 g-xxx 作爲 cssModule 的生成規則

最後看一下咱們改良後的 cssModule 生成的 classname，是否是清晰不少:

關於 Mock 數據

運行 Demo 須要從後臺 api 中獲取數據，一般得另外開一個 api 服務器，爲此本 Demo 特地寫了一個簡單的 mock 中間件來合併到 webpackDevServer 中。

爲何不用 mock.js？

• 想生成有邏輯的假數據，而不是一堆佔位字符
• 想模似真實的 http 請求和返回

它的基本原理以下：

它能夠：

• 記錄真實 API 的返回。若是啓用記錄功能，該中間件會攔截真實 API 的 Resphonse，將其以文件形式保存在/mock/temp/目錄下，能夠叫它們 MockFile
• 返回模擬數據。若是在/mock/下存在與請求 URL 匹配的 MockFile，將直接解析並返回該 MockFile
• 模擬延遲和各類 httpcode。編輯/mock/下面的 MockFile，在 header 中設置'x-delay'表示延遲返回，statusCode 設置 httpcode
• 模擬簡單的數據庫功能。/mock/下面有個database.js文件，該文件會被自動注入到各個 MockFile 中，你能夠用它來編寫簡單的 server 端數據邏輯
• 在 MockFile 中使用頂級變量。MockFile 中可使用 3 個頂級變量：'request', 'database', 'require'，因此你能夠直接const mockjs = require('mockjs');來引用 mockjs

關於熱更新

• 常規的熱更新直接由 webpack 及 loader 支持，好比 css、圖片等
• react 熱更新使用最新的React Fast Refresh方案，由於react-hot-loader已經宣告死亡了。
• medux 支持 model 和 view 的熱更新，能夠直接使用@medux/dev-utils/dist/webpack-loader/module-hot-loader來自動支持它們
• cssModule 會引發 view 的改動，從而使用 view 的熱更新

路由配置與按需加載

模塊的配置統一放在/src/modules/index.ts 中，例如：

// 定義模塊的加載方案，同步或者異步都可
export const moduleGetter = {
  app: () => {
    return import(/* webpackChunkName: "app" */ 'modules/app');
  },
  adminLayout: () => {
    return import(/* webpackChunkName: "adminLayout" */ 'modules/admin/adminLayout');
  },
  adminHome: () => {
    return import(/* webpackChunkName: "adminHome" */ 'modules/admin/adminHome');
  },
};
複製代碼

關於全局變量

不少項目都不推薦使用全局變量，認爲容易形成命名空間的污染。但從實用主義來講，我以爲可控的全局變量能夠提升很多開發效率，關鍵是可控。由於咱們使用 typescript 開發，具備不少靜態語言的類型安全，因此適量的把一些高頻使用的變量直接提高到全局變量是可控的。咱們將全局變量集中在 /src/Global.ts 中定義。

編譯與上線

• 運行 NODE_ENV=production SITE=xxx node build/build.js 命令會根據當前環境設置將代碼編譯到 /dist/xxx/ 目錄下，其中SITE=xxx表示使用 /conf/ 下的哪套環境設置
• 打包的基本原則是每一個 module 打成一個獨立的 chunk，這也是 medux 的特點
• 爲了防止按需加載時 css 樣式因爲動態注入而發生頁面抖動，特將 css 合併爲 2 個文件，一個是 node_modules 中的所有樣式，一個是 src 開發目錄中的所有樣式

SSR  服務器同構渲染

咱們注意到全部頁面分爲 2 類，一類是須要用戶登陸後可見的，如/admin/xxx，另外一類則是無需登陸的如/article/xxx。須要用戶登陸可見的頁面，對於搜索引擎 SEO 沒有意義，而無需用戶登陸的頁面咱們能夠將其改造爲服務器渲染，以此增長搜索引擎的流量入口。

如何將服務器渲染與瀏覽器渲染優雅的同構，請看另外一個 Demo：medux-react-ssr

持續改進

歡迎批評指正，以爲還不錯的別忘了給個Star >_<，若有錯誤或 Bug 請反饋，後續將持續改進。

QQ 羣交流：929696953