# workinghours

**Repository Path**: edeneden/workinghours

## Basic Information

- **Project Name**: workinghours
- **Description**: 武汉项目本地部署仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-06
- **Last Updated**: 2023-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 说明
本框架支持node16+构建，已接入天启，扁鹊和quark。
天启引用 src/utils/ubt.js 参考文档：https://hellobike.yuque.com/gzxsb9/gdvwvw/kegdas
扁鹊引用 src/utils/apm.js 参考文档：https://hellobike.yuque.com/gzxsb9/gdvwvw/itybxd
## 开始
## HellobileFE React 通用后台模板

* [快速上手](#quickStart)
* [开发目录介绍](#dirs)
* [注意事项](#notes)
* [常用配置说明](#settings)
  * [HTML自定义配置](#settings-01)
  * [路由权限](#settings-02)
  * [CDN链接引入](#settings-03)
  * [环境变量定义](#settings-04)
* [编译速度优化](#compile)
* [代码检查](#lint)
* [版本管理](#version)
* [MOCK API](#mock)
* [相关资料](#links)

<a name="quickStart"></a>

### 快速上手：

```bash
npm i // 安装依赖

npm run dev // 启动项目
npm run build // 生产环境打包

npm run analyze // 包体积分析

npm run eslint:fix // 代码检查&修复
npm run stylelint:fix
```

<a name="dirs"></a>

### 开发目录介绍
```
├── api ------------------- 对接服务端接口
├── components ------------ 通用组件目录
├── config ---------------- 配置目录
│   ├── env.ts ----------- 不同环境的常量配置
│   ├── layout.ts -------- 界面配置
│   └── routes.ts -------- 路由配置
├── global.less ----------- 全局样式文件
├── locales --------------- 国际化相关目录
├── models ---------------- 全局共享数据配置目录
├── pages ----------------- 页面组件目录
└── utils ----------------- 通用工具方法目录
│   └── request ---------- 请求方法目录
├── app.tsx --------------- umi运行时配置(不建议改动)
└── access.ts ------------- umi权限相关配置(不建议改动)
```

<a name="notes"></a>

### 注意事项
除文档说明的配置外, 尽量不要修改`src/app.tsx`、`src/access.ts`、`.umirc.ts`这三个文件
环境变量 `REACT_APP_ENV` 用于标识业务环境, 影响api接口配置等

<a name="settings"></a>

### 常用配置说明

<a name="settings-01"></a>

#### HTML自定义配置 
按照 umi 的约定, 以 `src/pages/document.ejs` 文件为应用的html模板, 文件内可以通过 ejs模板语法访问 umi 提供的变量 `<%=` `%>`；参考 [Umi 基础 - HTML 模板](https://umijs.org/zh-CN/docs/html-template)

<a name="settings-02"></a>

#### 路由权限
约定 `src/access.ts`为权限定义文件, 在项目启动时根据路由`config/routes.ts`配置的 actionId 判断该路由是否展示；其中 initialState 由`src/app.tsx`导出的 getInitialState 获取；参考 [Umi 插件 - @umijs/plugin-access](https://umijs.org/zh-CN/plugins/plugin-access)

<a name="settings-03"></a>

#### CDN链接引入
* 从`.umirc`的一级配置项 scripts 定义 (推荐)
* 在自定义HTML模板 `src/pages/document.ejs` 中加入 (不支持动态引入)

建议以第一种方式为主，避免混淆

<a name="settings-04"></a>

#### 环境变量定义
从`.umirc`的一级配置项 define 添加; 参考 [Umi 配置 - define](https://umijs.org/zh-CN/config#define)

<a name="compile"></a>

### 编译速度优化
* ***webpack5持久缓存*** - 对于非首次构建的情况, 只重新编译内容改变的 chunk, 其它 chunk 使用缓存 (开发环境默认开启);
* ***MFSU(Module Federation Speed Up)*** - 基于 webpack5 新特性"模块联邦"独立打包并缓存`node_modules`的依赖, 后续构建不再重新编译这些依赖模板; 
**缺点:** 安装/删除依赖包后需要手动清缓存`src/.umi/.cache/.mfsu` 如果开启webpack5持久缓存的基础上还有部分模块重新编译速度慢, 可以考虑开启
* ***CDN外链*** 比较稳定的依赖可以替换成 CDN 外链脚本, 定义在`.umirc`的 scripts/externals 配置项, 缩小每次构建编译范围; 示例:

``` javascript
// 定义外链脚本
scripts: process.env.NODE_ENV === 'development' ? [
  'https://m.hellobike.com/npm/react@17.0.2/umd/react.development.js',
  'https://m.hellobike.com/npm/react-dom@17.0.2/umd/react-dom.development.js',
  'https://m.hellobike.com/npm/axios@0.20.0/dist/axios.min.js',
  ...
] : [
  'https://m.hellobike.com/npm/react@17.0.2/umd/react.production.min.js',
  'https://m.hellobike.com/npm/react-dom@17.0.2/umd/react-dom.production.min.js',
  'https://m.hellobike.com/npm/axios@0.20.0/dist/axios.min.js',
  ...
],
...
// 定义不打包的模块
externals: {
  'react': 'window.React',
  'react-dom': 'window.ReactDOM',
  'axios': 'window.axios',
  ...
},
```

<a name="lint"></a>

### 代码检查
整个应用会基于 [@hb/codestyle-linter](https://gitlab.hellobike.cn/Carfee/codestyle-linter) 提供的规则检测代码是否符合公司统一语法规范.
* 每次`git commit`的时候会分别执行`eslint` `stylelint` `commitlint`的检查, 全都通过后才能 commit 成功;
* 每次保存文件时会启动`eslint` `stylelint`的格式自动修复, 或者可以手动执行 scripts 脚本批量修复.

<a name="version"></a>

### 版本管理
应用会根据`package.json`的 version 字段匹配上传的 publicPath 以及页面路径. 发布新版本前可以执行 `npm run release`, 基于 [standard-version](https://github.com/conventional-changelog/standard-version) 自动生成一个 commit 修改 version 字段并打上标签

<a name="mock"></a>

### MOCK API
默认使用`umi` dev server 内置的 mock 能力, 约定式 mock 数据定义请参考 [Umi 基础 - Mock 数据](https://umijs.org/zh-CN/docs/mock)
开发环境将环境参数`MOCK`设置成 **on** 可以将所有请求转发到 dev server 的 mock api, 设置成 **none** 则不使用 mock api

<a name="links"></a>

### 相关资料
[脚手架文档地址](https://hellobike.yuque.com/gzxsb9/gdvwvw/dauv75)

[umi文档地址](https://umijs.org/zh-CN/docs)