# ReactTemplate

**Repository Path**: jijuntech/react-template

## Basic Information

- **Project Name**: ReactTemplate
- **Description**: react-hook 模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-16
- **Last Updated**: 2022-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# EP-web

launch this app with [vite][vite_site]

## Feature

### project structure

### docs

> 文档目录

### src

-   `apis`  接口文件夹 [点击查看](#apis)

    > 定义业务中使用的`restful`接口,以服务端路由或业务划分文件`foo.ts`
    > 注意在`index.ts`中 **注册**
    > 与 `utils/request.ts`配合使用

-   `app` 项目入口组件/主容器

-   `assets`  静态资源文件夹  [点击查看](#assets)

-   `components`  公共组件文件夹  [点击查看](#components)

    > 欢迎同学们积极抽象、封装

-   `configs`  项目配置参数文件夹,网站页面的参数配置  [点击查看](#configs)

    > 尽可能参数提取出来,关键功能开关化

-   `constants`  常量文件夹  [点击查看](#constants)

    > 项目中使用到的常量,如枚举类型、映射关系等

-   `core` 数据仓库文件夹[点击查看](#core)

    > 以页面/业务划分文件

-   `hooks` 自定义钩子函数文件夹[点击查看](#hooks)

-   `locales` 国际化字条文件夹[点击查看](#locales)

-   `mocks` 模拟数据文件夹[点击查看](#mocks)

-   `models` 数据模型文件夹[点击查看](#models)

    > 页面中使用到的通常与业务相关的数据模型

-   `pages` 按页面路由划分的页面文件夹[点击查看](#pages)

-   `routers` 路由配置文件夹

    > 项目主/子路由必须在此处配置,禁止散落在文件中

-   `typing` 类型定义文件夹

    > typings.d.ts 中定义全局方法

-   `utils` 公共方法文件夹[点击查看](#pages)

    > 一般在 index.ts 中维护,如有必要以使用功能划分独立文件

## Dev Guidance

### <p id='apis'>apis</p>

-   对象定义格式：以  `api`开头,其次方法名称,最后根据服务端`url`地址自己命名,以小驼峰格式命名

-   在定义好的请求方法内写上`url`和`method`

-   最后在`index.ts`里面引入

-   例如：
    ```
    export default {
            apiPostSomething: {
            url: '/someRouter/somethingApi',
            method: 'post',
        },
    };
    ```

### <p id='assets'>assets</p>

-   `assets/images` 项目中使用的图片文件

-   `assets/styles` 项目中使用的公共样式

### <p id='components'>components</p>

-   文件夹必须首字母大写

-   每个文件夹下面都会由`index.ts`和`index.module.less`组成

-   `index.ts`

    -   首先`import`第三方库

    -   其次`import`自己的本地文件

    -   最后`import`静态资源

    -   如果`function`里面有参数,必须写泛型

-   `index.module.less` 定义样式

### <p id='configs'>configs</p>

-   小驼峰命名

-   例如：

    -   `textAreaMaximum`  文本最长长度 500

    -   `uploadImageMaxCount`  单次上传图片最多 5 张

### <p id='constants'>constants</p>

-   枚举了一些变量,例如：

    -   `MenuActiveKeyTypes`  类型

    -   `MenuActiveKeyTitles`  标题

### <p id='core'>core</p>

-   每一个页面有自己独立的`store`

-   最后在`RootStore.ts`里面引入

### <p id='hooks'>hooks</p>

-   自定义的钩子函数,例如节流函数

### <p id='locales'>locales</p>

-   `en-US.ts`英语

-   `zh-CN.ts`中文

-   页面不要出现中文,统一在这里定义

### <p id='mocks'>mocks</p>

-   定义组件自己的后台模拟

-   在 `_db.ts` 引入

### <p id='models'>models</p>

-   定义自己组件内部的状态

### <p id='pages'>pages</p>

-   `Forbidden` 403

-   每个页面有自己的`index.module.less`,里面放各自的样式

### <p id='utils'>utils</p>

-   `common.ts`--`getVariableType`类型检查

### Page structure

-   引入`react`等的公共库写在最上方

-   其次引入一些第三方库或者自定义组件,根据优先级引入

-   最后引入样式

-   公共库、第三方库或者自定义组件与相对路径资源之间建议使用空行分隔

### Function component specification

-   `props` 解构

-   用到的 `hooks`

-   业务代码

-   导出

### Git commit specification

-   `init` 创建

-   `feat` 迭代

-   `fix` 修改 bug

-   `docs` 添加/修改注释

-   `style` 添加/修改样式

-   `refactor` 重构/修改基础件

-   `test` 添加/修改测试用例

-   `solve` 解决冲突

-   `revert` 回滚

-   指令后不要加空格

-   提交代码不要存在没必要的代码注释,特定方法可以添加说明注释。

### main

-   `react`
-   `typescript`
-   `less`
-   `vite`
-   `tslint`
-   `stylelint`
-   `commitlint`
-   `prettier`

#### initial

-   `react@17.0.2`
-   `typescript@4.4.3`
-   `less@4.1.1`
-   `vite@2.5.10`
-   `prettier@2.4.11`

#### dev ops

-   `husky`
-   `commitlint`
-   `lint-staged`

## Scripts

1. `yarn start` 启动

2. `yarn build` 编译

    - `yarn build:analysis` 在`.cache/visualizer/stats.html` 中生成打包文件分析页面

3. `yarn lint` 语法检查

4. `yarn staging` 预编译 ≈ 编译

## Tips

1. 在开发期间 `Vite` 是一个服务器,而 `index.html` 是该 `Vite` 项目的入口文件

    - `Vite` 将 `index.html` 视为源码和模块图的一部分
    - 与静态 `HTTP` 服务器类似,`Vite` 也有 “根目录” 的概念,即服务文件的位置,在接下来的文档中你将看到它会以 `<root>` 代称

2. `JSX` 的转译同样是通过 `esbuild`,默认为 `React 16` 风格。期望在 esbuild 中支持 `React 17` 风格的 `JSX` 请看[这里][jsx_react17_github_address]

3. 使用 `jsxInject` (这是一个仅在 `Vite` 中使用的选项)为 JSX 注入 `helper`,以避免手动导入

4. 任何以 `.module.css` 为后缀名的 `CSS` 文件都被认为是一个 `CSS modules` 文件

5. 导入一个静态资源会返回解析后的 `URL`

    - 添加一些特殊的查询参数可以更改资源被引入的方式,请见[静态资源处理][vite_static_asset_address]

6. `JSON` 可以被直接导入 —— 同样支持具名导入

7. `Vite` 支持使用特殊的 `import.meta.glob` 函数从文件系统导入多个模块

    - 如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),你可以使用 `import.meta.globEager` 代替

8. 预编译的 `.wasm` 文件可以直接被导入 —— 默认导出一个函数,返回值为所导出 `wasm` 实例对象的 `Promise`

    - 在生产构建当中,体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 `base64` 字符串。否则,它们将作为资源复制到 `dist` 目录中,并按需获取

9. 一个 `web worker` 脚本可以直接通过添加一个 `?worker` 或 `?sharedworker` 查询参数来导入

10. `Vite` 在一个特殊的 `import.meta.env` 对象上暴露环境变量

    - 默认情况下,开发服务器 (`serve` 命令) 运行在 `development` (开发) 模式,而 `build` 命令运行在 `production` (生产) 模式
    - 会自动加载 `.env.production` 中可能存在的环境变量

11. 在生产环境中,环境变量会在构建时被静态替换

    - 使用 `unicode` 零宽度空格 `\u200b` (一个看不见的分隔符)来分割这个字符串,例如： `'import.meta\u200b.env.MODE'`

12. 上传代码不要随便改动其他同学的`type`类型定义

## Timeline

1. **created** ==_2022-08-23_==

2. **updated** ==_2022-08-23_==

## todos

-   [x] ~~add jsDoc/typeDoc support~~ **deprecated**

[vite_site]: https://cn.vitejs.dev/
[jsx_react17_github_address]: https://github.com/evanw/esbuild/issues/334/
[vite_static_asset_address]: https://cn.vitejs.dev/guide/assets.html/