技术栈：react umi3.x antd-mobild typescript
- 安装依赖
yarn
- 启动项目
yarn start # 本地mock
yarn satrt-mock # 在线mock
yarn satrt-dev # 开发环境
yarn start-test # 测试环境
yarn start-pro # 正式环境
- 打包项目
yarn build # 打包正式环境
yarn build-test # 打包测试环境
yarn build-dev # 打包开发环境
yarn build-analyze # 正式环境-分析资源
- 提交代码
git add .
yarn commit # 使用cz校验git message
目前内置了一些基本的组件，可具体查看下面列表
- git message 校验
- eslint+prettier代码格式化
- 高清方案配置(移动端适配)
- 应用多环境管理
- mock方案集成
- 全局样式注入
- 通用布局组件封装
- 使用
dva - 使用
antd-mobile组件库 -
h5内部导航封装 - 权限封装
- 请求二次封装
- 使用
Sentry进行异常监控 - 使用
oss插件，构建自动上传阿里云 - 接入百度统计谷歌统计
-
analyze打包资源分析 - 微信
js-sdk二次封装
- 高清方案
也就是移动端适配，目前采用的是@alitajs/hd,因为官方还没将高清方案的代码合并，待后续换成umi-plugin-hd
- 多环境封装
采用在脚本中添加PRO_VAR方式区分，目前start脚本默认使用本地mock，其他分别对应相应环境
- 全局样式注入
使用时，在编写less样式时，可使用styles/index.less下引入的所有样式，包括mixins/下工具，以及themes/default下antd-mobile的主题变量
不需要单独在每个页面单独引入
也可在config/theme.config.ts下修改antd-mobile变量值
栗子:
.page{
display: flex;
font-size: 15px;
color: @brand-primary; // antd-mobile主题变量 并且在config/theme.config.ts 修改过
background-color: @brand-important; // antd-mobile主题变量 默认没有修改过
.ellipsis(); // styles/mixins/util.less 的工具样式
}h5导航封装
具体可查看BasicLayout以及NavgationBar
可在页面内使用utils/nav.ts下的setOption对导航进行设置
目前导航支持设置参数有：
| 属性 | 值 |
|---|---|
| leftContent | React.ReactNode |
| rightContent | React.ReactNode |
- 请求二次封装
自行查看utils/request.ts，默认导出了四种请求方式，
可自行根据业务需要调整HttpCode的枚举值
- 权限封装
使用antd-pro的权限方案，在pages/Authorized可查看具体内容
在router中配置authority接受一个数组
如果是不用登录就能访问无需配置authority
需要登录才能访问[user]
需要登录并且需要二次认证之类的[user,admin]
- 使用
Sentry进行异常监控
主要使用@sentry/browser这个包，具体使用方法可查看官方文档，这里对它进行二次封装具体在utils/report.ts
处理全局脚本错误
// 注册全局错误处理
public registerGlobalError() {
// 全局监控资源加载错误
window.addEventListener(
'error',
event => {
// 过滤 js error
const target = event.target || event.srcElement;
// eslint-disable-next-line no-multi-spaces
const isElementTarget =
target instanceof HTMLScriptElement ||
target instanceof HTMLLinkElement ||
target instanceof HTMLImageElement;
if (!isElementTarget) {
return false;
}
// 上报资源地址
const url =
(target as HTMLScriptElement | HTMLImageElement).src || (target as HTMLLinkElement).href;
this.log({
error: new Error(`ResourceLoadError: ${url}`),
type: 'resource load',
});
},
true,
);
}处理全局接口异常utls/request.ts
function errorReport(
url: string,
error: string | Error,
requestOptions: AxiosRequestConfig,
response?: AnyObject,
) {
if (window.$sentry) {
const errorInfo: ServerApiErrorInfo = {
error: typeof error === 'string' ? new Error(error) : error,
type: 'request',
requestUrl: url,
requestOptions: JSON.stringify(requestOptions),
};
if (response) {
errorInfo.response = JSON.stringify(response);
}
window.$sentry.log(errorInfo);
}
}注意，这里还使用了@sentry/webpack-plugin实现打包将source-map文件上传至Sentry服务器实现文件预览
需要在项目根目录下新建.sentryclirc，因为设计账号，我将该文件排除上传至git了。
文件格式为：
[defaults]
url=https://sentry.io
org=xxx # 组织名
project=xx # 项目名
[auth]
token=xxx # token
- 使用
oss插件，构建自动上传阿里云
使用笔者写的umi-plugin-alioss插件，自动在构建完成之后上传至阿里云，插件支持umi2.x和umi3.x
需要注意的是要在系统用户目录下新建配置文件.alioss
- 统计管理
因为@umijs/preset-react默认集成了@umijs/plugin-analytics，所以不需要手动再次安装，不然会报错，
在config.ts直接配置analytics即可。
如果没有安装@umijs/preset-react可手动安装@umijs/plugin-analytics
yarn add @umijs/plugin-analytics -D
然后修改配置即可。umi3的插件机制会自动加载
analyze打包资源分析
默认使用umi的插件进行分析，使用如下命令
yarn build-analyze
- 微信
js-sdk二次封装
对于npm包二次封装，返回Promise,并增加类型