文章試煉

Umi搭建項目

基於 Umi + dva + React + Antd 搭建項目。

功能

• [x] Umi+dva+react+antd
• [x] sass/less
• [x] Dashboard
• [x] mock數據
• [x] proxy代理
• [x] 全局樣式
• [x] 權限測試
• [x] 404 / 403
• [x] 上傳七牛
• [x] Eslint校驗
• [x] px轉rem
• [x] 部署上線

目錄結構介紹

├── dist/                           // 默認的 build 輸出目錄
├── mock/                           // mock 文件所在目錄，基於 express
└── config/
    ├── config.js                   // umi 配置，同 .umirc.js，二選一
    ├── router.config.js            // 路由配置
└── src/                            // 源碼目錄
    ├── layouts/index.js            // 全局佈局
    └── pages/                      // 頁面目錄，裏面的文件即路由
        ├── .umi/                   // dev 臨時目錄，需添加到 .gitignore
        ├── .umi-production/        // build 臨時目錄，會自動刪除
        ├── document.ejs            // HTML 模板
        ├── 404.js                  // 404 頁面
        ├── page1.js                // 頁面 1，任意命名，導出 react 組件
        ├── page1.test.js           // 用例文件，umi test 會匹配全部 .test.js 和 .e2e.js 結尾的文件
        └── page2.js                // 頁面 2，任意命名
    ├── global.css                  // 約定的全局樣式文件，自動引入，也能夠用 global.less
    ├── global.js                   // 能夠在這裏加入 polyfill
    ├── app.js                      // 運行時配置文件
    ├── manifest.json               // 應用清單，暫時不清楚
    ├── service-worker.js           // 作離線緩存的新的api實現
├── tests/                          // umi內置jest的測試文件    
├── .umirc.js                       // umi 配置，同 config/config.js，二選一
├── .env                            // 環境變量
├── .editorconfig                   // 維護代碼風格的配置文件
├── .eslintignore                   // Eslint忽略文件
├── .eslintrc.js                    // Eslint配置文件
├── .gitignore                      // git要忽略的文件
├── .prettierignore                 // Prettier要忽略的文件
├── .prettierrc.js                  // Prettier代碼格式化配置文件 
├── .stylelintrc.js                 // css代碼審查的配置文件
├── CNAME                           // 規範名字，暫時不知道啥意思
├── jest-puppeteer.config.js        // puppeteer的配置文件
├── jest.config.js                  // Facebook出的單元測試的配置文件
├── jsconfig.jso                    // jsconfig.json文件指定根文件和JavaScript語言服務提供的功能選項
├── package.json                    // npm依賴記錄文件
├── tsconfig.json                   // ts的配置文件，指定了用來編譯這個項目的根文件和編譯選項
└── yarn.lock                       // yarn用來鎖定npm依賴的文件

搭建步驟

參考： UmiJs官網、
JsConfig.js、
JestConfig.js、
puppeteer、
stylelint、
Prettier、
Editorconfig、
Manifest.json

一、使用UmiJs 構建項目

node版本>=8.10, 推薦nvm管理node版本，yarn管理npm依賴（使用國內源）

# 國內源
$ npm i yarn tyarn -g
# 後面文檔裏的 yarn 換成 tyarn
$ tyarn -v
$ 1.16.0

全局安裝 umi，並確保版本是 2.0.0 或以上

$ yarn global add umi
$ mkdir umi-project && cd umi-project
$ yarn create umi

而後在選項中選擇想要的項目，通常選擇app（移動項目）或者antd-pro（pc項目）

? Select the boilerplate type (Use arrow keys)
  ant-design-pro  - 包含 ant-design-pro 佈局的腳手架
❯ app             - 通用項目腳手架
  block           - 區塊腳手架
  library         - 插件腳手架
  plugin          - 依賴（組件）庫腳手架

而後選擇基礎的配置項，通常前四個

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd                 - 包含antd
 ◯ dva                  - 包含dva
 ◯ code splitting       - 包含按需加載
 ◯ dll                  - 包含dll二次啓動加速
 ◯ internationalization - 國際化

接下來安裝依賴並啓動

$ yarn
$ npm start

此時，項目已經啓動，經過 http://localhost:8000 訪問

注意：react@16.9.0會有警告

Warning: componentWillMount has been renamed, and is not recommended for use

解決方案：固定package.json中react和react-dom的版本

"react": "16.8.6",
"react-dom": "16.8.6"

刪除node_mudules, 執行yarn從新安裝，哇，世界乾淨了，8:43pm, 先回家再說。

二、配置 Eslint規則

umi配置了一套基礎的校驗規則，在下圖裏配置文件中，須要添加新的規則的話，要注意合併，以下：

//配置.eslintrc.js
const { strictEslint } = require('@umijs/fabric');

// 須要手動修改規則的話這樣合併進去
const rules = {
  "max-len": 0,
  ...strictEslint.rules,
}
module.exports = {
  ...strictEslint,
  rules,
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
  },
};

三、配置本地服務啓動端口和代理

package.json中修改

"start": "PORT=3000 umi dev",

config/config.js中添加

proxy: {
    '/api': {
      target: 'https://kai.maihaoche.net',
      changeOrigin: true,
    },
},

項目截圖