在常规的架构基础上，增加Amis(低代码)框架。划分两条线，相对变化不大且简单的页面可以使用Amis来搭建，复杂交互的则选择用常规的方式来实现。
- React 18 - React
- Ant.d - ANT.D UI 框架
- Tailwindcss - CSS 原子化样式
- TS - 代码约束
- React-router-dom - 路由
- Mobx - 状态管理
- Amis - 低代码(JSON生成页面)
- jest - 单元测试
- Storybook - UI测试
- Vite] - 启动/构建工具
- Axios - 异步Ajax工具
- Lodash - 工具函数
- Rxjs - 异步事件流管理工具
目录规范和思想源至于下面这篇文章
Inspired by https://phodal.github.io/clean-frontend/
基础目录
.
├── dist // build 的目录
│ ├── assets // 静态资源目录
│ └── index.html // 外部访问的模板
├── statics // 静态资源目录
├── src
│ ├── core // 核心代码，包含基本服务和基础代码
│ ├── domain // 业务层代码，包含每个业务的单独 Clean 架构内容
│ │ └── todo // *某一具体的业务
│ ├── features // 存放公共组件、hooks、helpers等
│ ├── public // 其他公共资源，如 const等
│ ├── pages // 公共页面
│ ├── types // 公共类型定义目录
│ └── shared // 共享目录，可以抽离到其他项目用或独立形成为npm包的内容
├── index.html // 页面模板
├── package.json
├── postcss.config.js // postcss 配置
├── tailwind.config.js // taiwind配置
├── README.md
├── tsconfig.json // ts配置
├── tsconfig.node.json // ts配置
└── vite.config.ts // vite 配置
对应的 todo 是某一个具体的业务，在该目录下包含了一个完整的 Clean Architecture，相应的目录和文件如下所示：
├── model
│ ├── todo.entity.ts // 数据实体，简单的数据模型，用来表示核心的业务逻辑
│ └── todo.model.ts // 核心业务模型
├── repository
│ ├── todo.mapper.ts // 映射层，用于核心实体层映射，或映射到核心实体层。
│ └── todo.repository.ts // Repository，用于读取和存储数据。
Features 公共的业务组件目录
├── Helpers // 业务公共组件
├── Xcomponent
│ ├── Xcomponent.tsx // main view (组件视图，只写视图及视图相关逻辑，任何计算、转换数据在repository或者store中进行)
│ ├── Xcomponent.module.less // css style (样式)
│ ├── Xcomponent.d.ts // component type props definition (ts类型)
│ ├── Xcomponent.util.ts (optional) // complex component process (复杂组件逻辑处理)
│ ├── Xcomponent.config.ts (optional) // constant config （常量配置）
│ ├── Xcomponent.stories.tsx (optional) // storybook file for ui test （ui 组件化测试构建）
│ ├── Xcomponent.test.tsx (optional) // jest unit test （单元测试）
│ └── Xcomponent.store.ts (optional) // manage component store (组件自身状态层，可选)
yarn insatll | npm i
新增 .editorconfig 配置文件（项目已包含不用新增，这里只是做标记）
修改 editor.json，增加以下配置
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.tslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.tsdk": "node_modules/typescript/lib",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
vscode 安装插件
eslint、prettier
在 vite.config.ts 中的 css中修改变量
css: {
preprocessorOptions: {
less: {
modifyVars: {
// 在此处通过修改 antd 的 less 变量来进行样式适配
// 'primary-color': '#645AFF',
// 'text-color': '#ff0000',
},
javascriptEnabled: true,
},
},
}
在src/styles/amis_antd.css修改相关样式
- 表单
由于本项目使用vite，所以amis的require模块无法正常载入，目前已经有相关issue，待官方提供esm的包。
因此amis里面的echarts相关功能，暂时是不能用的，这个需要注意。如果要实现图表类的需求，需要用传统的方式来写组件或者通过amis的自定义组件的方式来实现。
启动storybook服务，进行组件UI测试
yarn storybook
或者
npm run storybook
启动test服务，基于jest进行组件、工具等的单元测试
yarn test
或者
npm run test
先构建出 dist 文件
yarn build
或者
npm run build
由于使用history路由，nginx 增加如下配置
location / {
add_header Cache-Control 'no-store, no-cache'; // 设置不缓存
try_files $uri $uri/ /index.html;
}
整体使用 commitlint、commitizen、husky 来规范提交说明
推荐使用命令来提交代码，通过问答的方式写log
yarn commit
或者
npm run commit
如果使用 git commit 也会触发 commit-msg 钩子，需要符合 "${type}: ${msg}" 的提交规范
https://juejin.cn/post/7047682306294677512 https://juejin.cn/post/7053730154710827045 https://github.com/conventional-changelog/commitlint/#what-is-commitlint
默认情况下，工具会自动根据 主版本（ major ），次版本（ minor ） or 修订版（ patch ） 规则生成版本号，例如如果你 package.json 中的version 为 1.0.0, 那么执行后版本号则是：1.0.1
standard-version