文章试炼

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,
    },
},

项目截图