umi h5 快速启动模版

技术栈：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

基本组件

目前内置了一些基本的组件，可具体查看下面列表

• Authorized 权限 查看更多
• ErrorBoundary 组件错误拦截 查看更多

功能列表

• 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对导航进行设置

目前导航支持设置参数有：

• 请求二次封装

自行查看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,并增加类型