使用UmiJS开发项目（上）

目录

一、Umi是什么

二、项目初始化

三、配置prettier,eslint,stylelint

四、配置文件

五、多环境多配置文件

---

前段时间公司重构的项目中选用Umi框架，使用的过程中整理并封装了一些Umi常用的功能。由于文章篇幅较长，所以分为上、下两篇

一、Umi是什么

首先介绍一下Umi，Umi(乌米，蚂蚁金服的底层前端框架)，是可扩展的企业级前端应用框架。支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。同时配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

具备以下功能：

可扩展：Umi实现了完整的生命周期，并使其插件化，Umi内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求

开箱即用：内置了路由，构建，部署，测试等，仅需一个依赖即可上手开发。并且还提供针对React的集成插件集。

企业级：经蚂蚁内部3000+项目以及阿里，优酷，网易，飞猪等公司项目的经验，值得信赖。

大量自研：包含微前端，组件打包，文档工具，请求库，hooks库，数据流等，满足日常项目的周边需求。

完备路由：支持配置式路由和约定式路由，同时保持功能的完备性，如动态路由，嵌套路由，权限路由等

面向未来：在满足需求的同时，不会停止对新技术的探索，如dll提速，modern mode、webpack@5、自动化external、bundler  less等

二、项目初始化

环境准备：

node版本需要是10.13或以上，推荐使用yarn管理npm依赖，（本项目node v14.16.0  yarn  v1.22.10）

脚手架：

新建文件夹----在该文件夹下执行yarn create  @umijs/umi-app创建项目----安装依赖yarn----启动项目yarn  start

三、配置prettier,eslint,stylelint

为了让项目以后在不同的人接手之后也能对格式进行统一，所以我们需要在开发需求之前配置prettier,eslint,stylelint

umi维护了一个prettier，eslint，stylelint的配置文件合集umi-fabric

1、yarn add  @umijs/fabric -D

2、根目录新建.eslintrc.js、.prettierrc.js、stylelintrc.js以及eslint忽略文件.eslintignore,删除.prettierrc文件

3、各个文件配置内容如下：

//.eslintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
  rules: {
    //可配置一些自己的规则
    'no-console': 0,
  }，
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
    REACT_APP_ENV: true
  }
}


//.prettierrc.js

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
};


//stylelintrc.js

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.stylelint,
};


//.eslintignore

/lambda/
/scripts
/config
.history
public
dist
.umi
mock
.eslintrc.js
node_modules

4、在package.json里面的lint-staged新增"eslint \--fix"

  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write",
      "eslint --fix"  //新增
    ]
  },

5、配置好之前还需要在vscode安装三个同名扩展插件

如果eslint或者prettier不生效的话：

1)、可以到终端里的输出找到eslint或者prettier的输出日志，如果有报错根据报错信息处理问题。

2)、确保安装umi-fabric

3)、检查配置文件

4)、vscode的同名扩展插件是否都已经安装了

如果想了解更多这一块的内容可以看看这篇文章：

团队协作开发之prettier,eslint,husky,commitlint_旺旺旺小小苏的博客-CSDN博客

四、配置css初始化代码：

由于不同的浏览器对有些标签的默认值是不同的，如果没对css初始化就会出现浏览器之间页面的差异。Umi中约定src/global.css为全局样式，如果存在此文件，会被自动引入到入口文件最前面

src下创建global.css或者global.less，代码如下：

body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select,
figure,
figcaption {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
img {
  border: none;
}
input {
  outline: none
}

很多人也会直接写*{padding：0；margin：0}这样写的话确实也可以对样式初始化起作用，而且代码也简洁，但是如果网站很大，css样式表文件很大，这样写的话会把所有标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

四、配置文件

Umi在.umirc.ts或者config/config.ts中配置项目和插件，支持es6

如果项目的配置不复杂，可以在.umirc.ts中写配置，如果项目的配置比较复杂，可以将配置写在config/config.ts中（需要删除.umirc.ts文件，否则config.ts不生效），并把配置的一部分拆分出去，例如路由的配置，由于目前我们项目使用的是约定式路由，所有我们是使用.umirc.ts配置项目的 ，.umirc.ts优先级更高

import { defineConfig } from 'umi';
import { resolve } from 'path';


export default defineConfig({
  antd: {},
  dva: {
    hmr: true,
  },
  history: {
    type: 'hash',  //使用哈希路由
  },
  targets: {
    ie: 11,
  },
  alias: {
    '@': resolve(__dirname, './src'),
    images: resolve(__dirname, './src/assets/images/'),
  }, 
  define: {},
  proxy: {}
})

五、多环境多配置文件

可以通过环境变量UMI_ENV区分不同环境来指定配置，为了兼容性，可借助第三方工具cross-env来设置环境变量 yarn add  cross-env  --dev

在package.json中的script中配置

"start:release": "cross-env UMI_ENV=uat umi dev",
"start:prod": "cross-env UMI_ENV=prod umi dev",
"start:test": "cross-env UMI_ENV=test umi dev",
"build:test": "cross-env UMI_ENV=test umi build",
"build:prod": "cross-env UMI_ENV=prod umi build",
"build:release": "cross-env UMI_ENV=uat umi build",

然后在项目文件夹下分别建.umirc.test.js  .umirc.uat.js  umirc.pro或在config文件夹下新建config.test.js   config.uat.js  config.prod.js代表测试环境，预发布环境，生产环境的配置文件

//  .umirc.test.js
import { defineConfig } from 'umi';
export default defineConfig({
   define: {
       API_URL:'https://test.com...',
   }
})

// .umirc.uat.js
import { defineConfig } from 'umi';
export default defineConfig({
   define: {
       API_URL:'https://uat.com...',
   }
})

//.umirc.prod.js
import { defineConfig } from 'umi';
export default defineConfig({
   define: {
       API_URL:'https://www.com...',
   }
})

define:用于提供给代码中可用的变量，定义的变量可以全局拿到，使用时直接用API_URL这个变量即可。在项目中，我会把请求后端接口的地址放在define中或者一些公共的变量且不同的环境值不同的放在define中

但是在用这个变量的时候会发现会出现红线，这时需要到根目录的typing.d.ts添加

declare const API_URL: string;