generator-mico-cli 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
## 文档索引
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
| 文档 | 说明 |
|
|
8
|
+
|---|---|
|
|
9
|
+
| [docs/mico-cli.md](docs/mico-cli.md) | Mico CLI 功能概述与技术方案 |
|
|
10
|
+
| [docs/subapp-react-generator.md](docs/subapp-react-generator.md) | React 子应用生成器说明 |
|
|
8
11
|
|
|
9
12
|
## 要求
|
|
10
13
|
|
|
@@ -38,9 +41,9 @@ yo subapp-react
|
|
|
38
41
|
mico create mirco-react -- --help
|
|
39
42
|
```
|
|
40
43
|
|
|
41
|
-
## React
|
|
44
|
+
## React 子应用生成器
|
|
42
45
|
|
|
43
|
-
该生成器会复制 `apps/homepage`
|
|
46
|
+
该生成器会复制 `apps/homepage` 模板为新的子应用，并替换标识字符串。
|
|
44
47
|
`config/` 目录下的多环境配置会完整保留。
|
|
45
48
|
|
|
46
49
|
```bash
|
|
@@ -50,16 +53,16 @@ mico create subapp-react
|
|
|
50
53
|
|
|
51
54
|
## 同步子应用模板
|
|
52
55
|
|
|
53
|
-
|
|
56
|
+
将源项目的 `apps/homepage` 同步到生成器模板目录：
|
|
54
57
|
|
|
55
58
|
```bash
|
|
56
|
-
|
|
59
|
+
SOURCE_PROJECT_ROOT=<source-project-root> npm run sync:subapp-react-template
|
|
57
60
|
```
|
|
58
61
|
|
|
59
62
|
也可以直接传入路径：
|
|
60
63
|
|
|
61
64
|
```bash
|
|
62
|
-
npm run sync:subapp-react-template -- <
|
|
65
|
+
npm run sync:subapp-react-template -- <source-project-root>
|
|
63
66
|
```
|
|
64
67
|
|
|
65
68
|
忽略清单位于 `generators/subapp-react/ignore-list.json`。
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# <%= appName %> 子应用
|
|
2
|
+
|
|
3
|
+
qiankun 微前端子应用，基于 UmiJS Max 构建。
|
|
4
|
+
|
|
5
|
+
## 快速开始
|
|
6
|
+
|
|
7
|
+
### 安装依赖
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# 在项目根目录执行
|
|
11
|
+
pnpm install
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### 启动开发服务
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
# 方式一：在项目根目录执行
|
|
18
|
+
pnpm -C apps/<%= appName %> dev
|
|
19
|
+
|
|
20
|
+
# 方式二：进入子应用目录执行
|
|
21
|
+
cd apps/<%= appName %>
|
|
22
|
+
pnpm dev
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 环境变量配置
|
|
26
|
+
|
|
27
|
+
在 `apps/<%= appName %>/.env.local` 文件中配置环境变量（如果不存在请创建）：
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
# 开发服务器端口号（默认 8000）
|
|
31
|
+
PORT=8001
|
|
32
|
+
|
|
33
|
+
# 其他环境变量示例
|
|
34
|
+
# MOCK=none # 禁用 mock 数据
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
> **提示**：`.env.local` 文件不会被 Git 追踪，适合存放本地开发配置。
|
|
38
|
+
|
|
39
|
+
## 常用命令
|
|
40
|
+
|
|
41
|
+
| 命令 | 说明 |
|
|
42
|
+
|---|---|
|
|
43
|
+
| `pnpm dev` | 启动开发服务器 |
|
|
44
|
+
| `pnpm start` | 同 `pnpm dev` |
|
|
45
|
+
| `pnpm build` | 生产环境构建 |
|
|
46
|
+
| `pnpm build:development` | 开发环境构建 |
|
|
47
|
+
| `pnpm build:testing` | 测试环境构建 |
|
|
48
|
+
| `pnpm build:production` | 生产环境构建 |
|
|
49
|
+
| `pnpm setup` | 初始化 Umi 配置 |
|
|
50
|
+
|
|
51
|
+
## 目录结构
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
<%= appName %>/
|
|
55
|
+
├── config/ # Umi 配置目录
|
|
56
|
+
│ ├── config.ts # 基础配置
|
|
57
|
+
│ ├── config.dev.ts # 开发环境配置
|
|
58
|
+
│ ├── config.prod.ts # 生产环境配置
|
|
59
|
+
│ ├── config.testing.ts # 测试环境配置
|
|
60
|
+
│ └── routes.ts # 路由配置
|
|
61
|
+
├── mock/ # Mock 数据
|
|
62
|
+
│ └── api.mock.ts
|
|
63
|
+
├── src/
|
|
64
|
+
│ ├── app.tsx # Umi 运行时配置
|
|
65
|
+
│ ├── assets/ # 静态资源
|
|
66
|
+
│ ├── common/ # 公共模块
|
|
67
|
+
│ │ ├── logger.ts # 日志工具
|
|
68
|
+
│ │ ├── mainApp.ts # 主应用通信
|
|
69
|
+
│ │ └── request.ts # 请求封装
|
|
70
|
+
│ ├── pages/ # 页面组件
|
|
71
|
+
│ ├── styles/ # 样式文件
|
|
72
|
+
│ └── global.less # 全局样式
|
|
73
|
+
├── .env.local # 本地环境变量（需自行创建）
|
|
74
|
+
├── package.json
|
|
75
|
+
└── tsconfig.json
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## 微前端配置
|
|
79
|
+
|
|
80
|
+
本应用作为 qiankun 子应用运行，关键配置：
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
// config/config.ts
|
|
84
|
+
{
|
|
85
|
+
mountElementId: '<%= appName %>-root', // 挂载元素 ID
|
|
86
|
+
qiankun: {
|
|
87
|
+
slave: {}, // 启用子应用模式
|
|
88
|
+
},
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## 共享依赖
|
|
93
|
+
|
|
94
|
+
如项目配置了共享样式包，可在 Less 文件中引入：
|
|
95
|
+
|
|
96
|
+
```less
|
|
97
|
+
@import '@your-scope/shared-styles/variables';
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## 相关文档
|
|
101
|
+
|
|
102
|
+
### 项目文档
|
|
103
|
+
|
|
104
|
+
- [项目根目录 README](../../README.md)
|
|
105
|
+
|
|
106
|
+
### UmiJS 官方文档
|
|
107
|
+
|
|
108
|
+
| 文档 | 说明 |
|
|
109
|
+
|---|---|
|
|
110
|
+
| [快速上手](https://umijs.org/docs/guides/getting-started) | 环境准备、创建项目、启动与部署 |
|
|
111
|
+
| [目录结构](https://umijs.org/docs/guides/directory-structure) | 项目目录约定 |
|
|
112
|
+
| [路由](https://umijs.org/docs/guides/routes) | 路由配置与约定式路由 |
|
|
113
|
+
| [环境变量](https://umijs.org/docs/guides/env-variables) | `.env` 文件与环境变量配置 |
|
|
114
|
+
| [Mock 数据](https://umijs.org/docs/guides/mock) | 本地 Mock 数据配置 |
|
|
115
|
+
| [微前端](https://umijs.org/docs/max/micro-frontend) | qiankun 微前端集成 |
|
|
116
|
+
| [配置](https://umijs.org/docs/api/config) | 完整配置项参考 |
|