| title | hero | features | |||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ProApp - 快速构建现代化monorepo应用 |
|
|
我们所有的包管理都强制使用pnpm，在 monorepo 架构之上，pnpm 能极大发挥他的作用(设计初期就很好的考虑了当前复杂项目的痛点)，相比 yarn 和 npm，pnpm 能节约磁盘空间并提升安装速度，且避免了关于深度嵌套包的一些意外情况，如果你还没有接触了解过 pnpm,可以看看相关文章, 而且当前已有众多前端团队和开源项目抛弃 npm,yarn，开始接入 pnpm。快速开始
npm pure-install(建议使用)纯净模式，仅安装主应用和 packages 的依赖， 忽略所有子应用依赖pnpm i安装所有依赖，包括 packages 和 projectsnpm run dev# 运行主项目npm run build# 打包主项目npm run dev-project# 运行项目下的子应用(visual, dashboard, dataModel, ....)npm run build-lib# 懒加载打包(esm 格式)package 下所有库(保留文件的引用关系)，能解耦主应用代码，避免重复打包npm run build-dist# 打包生产环境下 package 下所有库(压缩，生成单文件),适用于给其他团队项目中使用，仅忽略 antd,proComponents,moment 库npm run build-selectPkg# 手动选择打包，防止后期包太多的情况全部打包消耗过多资源和时间npm run doc# 运行项目文档， 包含组件库文档和项目说明等npm run test# 跑测试用例
-
umi4.x: 快速构建 React 应用，react(V18.2),router(V6),集成 auto import, 微前端等插件。
-
TypeScript: 包代码提供强类型支持
-
state management: Umi Model & Valtio
-
unocss: 即使按需原子化 CSS 编译
-
ant5.x: 快速研发企业级中后台产品, 开箱即用的高质量 React 组件
-
theme ｜ layout: 完全兼容新版 antd5 特性，支持自定义配置主题，主题 token 接入 unocss 和 css，less 变量, keep-alive 等。
-
dumi4.x: 为组件开发场景而生的静态站点框架
-
commontLint: 让你的 commits 更有意义
-
jest: 优雅、简洁的 JavaScript 测试框架
-
proComponents: 页面级组件让中后台开发更简单
-
CI / CD: 一整套发布操作流自动化流程， 打包构建 =>跑测试用例 => 选择发包（多个）=> 选择升级的主版本包 => 打版本 tag => 生成日志 change-log => 写入到 dumi 文档 => 发布 npm
-
monorepos: 包和应用划分清晰，跨应用复用代码，按需安装，支持纯净模式，仅安装主应用和相关包依赖
-
dev | build: 优化 dev & build 配置，无需担心打包相关问题和 dev 环境的研发体验。
-
vscode integrate: 适配研发插件 monorepo-workspace，快速铺平应用，优化 commit 显示，加速研发效率
-
vscode cofig：针对该项目特有的编辑器的配置优化，如多文件折叠，autosave...
-
pwa: 支持离线访问，独立安装，缓存机制等wrokbox功能，增加首屏的打开速度。
-
search: 支持全文内容动态拼音检索，纠错检索等。
-
auto-import: 接入unplugin-auto-import插件，在应用中所有关于 react, antd, proComponents, ahooks, antd/icons 中的 api 可以不用导入直接使用，插件会自动导入需要的 API;
-
CRUD: 丰富的业务组件，覆盖常用业务
-
final: 一直都在持续更新中,只为更快更好的研发体验...
npm run release提供界面交互可视化发包npm run release:only手动修改版本号后发包 查看更多
为了很好的区分应用和对应的路由，我们建议所有子应用使用 hash 路由开发，这样能统一路由风格，增加路由的可读性，且能减少很多不必要的 nginx 配置 😊
http://xxx.xxx.xxx.xx:8088/dash/#/list?type=dashboard
地址拆分解析：
-
http://xxx.xxx.xxx.xx:8088- 主机地址 -
/dash- 路由的 history 用来区分子应用 -
/#/list- hash 路由参数为子应用自己的路由 -
?type=dashboard- 传参
- changeSets :发包工具
- dumi:文档工具
- father-builder: 库打包工具
- testing-library: react 测试库
- husky: 代码提交规范工具
- jest:自动化测试框架
- react chorme debug: react 调试 & 性能分析
- vscode monorepo workspace: monorepo 工程 vscode 插件，进一步优化你的开发体验
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |