目录
前段时间公司重构的项目中选用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;