@ysjdemo/umi-create-cli 0.0.1 → 0.0.3

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
@@ -1,117 +1,94 @@
1
- # @cfmm/umi-create-cli
1
+ # @ysjdemo/umi-create-cli
2
2
 
3
- 一个用于快速创建 Umi 4 项目的脚手架工具。
3
+ 一个用于创建Umi4项目的脚手架工具
4
4
 
5
- ## ✨ 特性
5
+ ## 使用方式(推荐npx)
6
6
 
7
- - 🚀 快速创建 Umi 4 项目
8
- - 🎨 提供多种项目模板
9
- - 📦 自动配置常用依赖和配置
10
- - 💻 支持 TypeScript
11
- - 🔧 预配置 ESLint 和 Prettier
12
-
13
- ## 📦 安装
14
-
15
- ### 全局安装
16
7
  ```bash
17
- npm install -g @cfmm/umi-create-cli
18
- ```
8
+ # 🔥 推荐:使用 npx 直接创建(无需安装)
9
+ # 会自动提示选择模板,默认推荐 Ant Design Pro
10
+ npx @ysjdemo/umi-create-cli create my-project
19
11
 
20
- ### 或使用 npx(推荐)
21
- ```bash
22
- npx @cfmm/umi-create-cli create my-project
12
+ # 或直接指定模板
13
+ npx @ysjdemo/umi-create-cli create my-project -t antd
14
+ npx @ysjdemo/umi-create-cli create my-project -t basic
15
+
16
+ # 查看帮助
17
+ npx @ysjdemo/umi-create-cli --help
23
18
  ```
24
19
 
25
- ## 🚀 使用
20
+ ## 交互式模板选择
26
21
 
27
- ### 创建新项目
28
- ```bash
29
- # 使用默认模板(basic)
30
- ysj-umi create my-project
22
+ 当您运行创建命令时,会看到如下交互界面:
31
23
 
32
- # 指定模板类型
33
- ysj-umi create my-project -t antd
24
+ ```
25
+ 🚀 创建 Umi4 项目...
26
+ 📋 请选择项目模板:
27
+ ❯ 🎨 antd - Ant Design Pro 模板 (推荐)
28
+ 📦 basic - 基础模板
34
29
  ```
35
30
 
36
- ### 在当前目录初始化
37
- ```bash
38
- # 在当前目录初始化项目
39
- ysj-umi init
31
+ ## 安装方式(可选)
40
32
 
41
- # 指定模板类型
42
- ysj-umi init -t antd
43
- ```
33
+ 如果需要频繁使用,可以选择全局安装:
44
34
 
45
- ### 查看帮助
46
35
  ```bash
47
- ysj-umi --help
48
- ```
36
+ # 全局安装
37
+ npm install -g @ysjdemo/umi-create-cli
49
38
 
50
- ## 📋 可用模板
39
+ # 或使用 yarn
40
+ yarn global add @ysjdemo/umi-create-cli
51
41
 
52
- ### 1. basic - 基础模板
53
- - Umi 4 基础配置
54
- - ✅ React 18 + TypeScript
55
- - ✅ 基础路由配置
56
- - ✅ 简单的页面示例
42
+ # 安装后使用
43
+ ysj-umi create my-project
44
+ ysj-umi --version
45
+ ```
57
46
 
58
- ### 2. antd - Ant Design Pro 模板
59
- - ✅ 基于 Ant Design 5.0
60
- - ✅ Pro Components 组件库
61
- - ✅ 完整的后台管理界面
62
- - ✅ 仪表盘、用户管理、设置页面
63
- - ✅ 表格、表单等常用功能
47
+ ## 特性
64
48
 
65
- ## 📁 项目结构
49
+ - 🚀 快速创建Umi4项目
50
+ - 📦 内置常用配置模板
51
+ - 🎨 支持TypeScript
52
+ - 📱 支持多种UI库选择
53
+ - ⚡️ 支持npx直接使用,无需安装
54
+ - 🎯 交互式模板选择,默认推荐最佳实践
66
55
 
67
- 创建的项目具有以下目录结构:
56
+ ## 模板选项
68
57
 
69
- ```
70
- my-project/
71
- ├── src/
72
- │ ├── components/ # 通用组件
73
- │ ├── pages/ # 页面组件
74
- │ ├── services/ # API 服务
75
- │ └── utils/ # 工具函数
76
- ├── .umirc.ts # Umi 配置文件
77
- ├── .gitignore # Git 忽略文件
78
- ├── .prettierrc # Prettier 配置
79
- ├── tsconfig.json # TypeScript 配置
80
- ├── package.json # 项目依赖
81
- └── README.md # 项目说明
82
- ```
58
+ - **🎨 Ant Design Pro 模板**(推荐):企业级后台管理系统
59
+ ```bash
60
+ npx @ysjdemo/umi-create-cli create my-admin -t antd
61
+ ```
62
+ - 集成 Ant Design 5.0
63
+ - Pro Components 组件库
64
+ - 完整的后台管理界面
65
+ - 仪表盘、用户管理、设置页面
83
66
 
84
- ## 🛠️ 开发流程
67
+ - **📦 基础模板**:轻量级起始项目
68
+ ```bash
69
+ npx @ysjdemo/umi-create-cli create my-project -t basic
70
+ ```
71
+ - 基础 Umi 4 配置
72
+ - TypeScript 支持
73
+ - 简洁的项目结构
85
74
 
86
- 创建项目后,进入项目目录并安装依赖:
75
+ ## 开发
87
76
 
88
77
  ```bash
89
- cd my-project
90
- npm install
91
- ```
78
+ # 克隆项目
79
+ git clone https://github.com/Ivan-YangSj/umi-cli.git
92
80
 
93
- 启动开发服务器:
81
+ # 安装依赖
82
+ npm install
94
83
 
95
- ```bash
84
+ # 本地开发测试
96
85
  npm start
97
- ```
98
86
 
99
- 构建生产版本:
100
-
101
- ```bash
102
- npm run build
87
+ # 发布新版本
88
+ npm version patch
89
+ git push origin --tags
103
90
  ```
104
91
 
105
- ## 📖 相关文档
106
-
107
- - [Umi 4 官方文档](https://umijs.org/)
108
- - [Ant Design 文档](https://ant.design/)
109
- - [Pro Components 文档](https://procomponents.ant.design/)
110
-
111
- ## 🤝 贡献
112
-
113
- 欢迎提交 Issue 和 Pull Request!
114
-
115
- ## 📄 许可证
92
+ ## License
116
93
 
117
- [MIT](LICENSE)
94
+ MIT
package/bin/cli.js CHANGED
@@ -12,7 +12,7 @@ program
12
12
  program
13
13
  .command('create <project-name>')
14
14
  .description('创建一个新的 Umi4 项目')
15
- .option('-t, --template <template>', '使用指定模板 (basic, antd)', 'basic')
15
+ .option('-t, --template <template>', '使用指定模板 (basic, antd, qiankun)')
16
16
  .action(async (projectName, options) => {
17
17
  try {
18
18
  await createProject(projectName, options);
@@ -26,7 +26,7 @@ program
26
26
  program
27
27
  .command('init')
28
28
  .description('在当前目录初始化 Umi4 项目')
29
- .option('-t, --template <template>', '使用指定模板 (basic, antd)', 'basic')
29
+ .option('-t, --template <template>', '使用指定模板 (basic, antd, qiankun)')
30
30
  .action(async (options) => {
31
31
  try {
32
32
  await initProject(options);
package/lib/create.js CHANGED
@@ -1,146 +1,171 @@
1
- const fs = require('fs-extra');
2
- const path = require('path');
3
- const inquirer = require('inquirer');
4
- const chalk = require('chalk');
5
- const ora = require('ora');
6
- const { generateTemplate, getAvailableTemplates } = require('./templates');
1
+ const fs = require("fs-extra");
2
+ const path = require("path");
3
+ const inquirer = require("inquirer");
4
+ const chalk = require("chalk");
5
+ const ora = require("ora");
6
+ const { generateTemplate, getAvailableTemplates } = require("./templates");
7
+
8
+ // 默认选择的模板
9
+ const BASE_TEMPLATE = "qiankun";
10
+
11
+ const templateChoices = [
12
+ {
13
+ name: `🏗️ qiankun + antd + umi - 微前端模板 ${chalk.cyan("(推荐)")}`,
14
+ value: "qiankun",
15
+ short: "qiankun",
16
+ },
17
+ {
18
+ name: `🎨 antd + umi - Ant Design Pro 模板`,
19
+ value: "antd",
20
+ short: "antd",
21
+ },
22
+ {
23
+ name: `📦 umi - 基础模板`,
24
+ value: "umi",
25
+ short: "umi",
26
+ },
27
+ ];
7
28
 
8
29
  async function createProject(projectName, options) {
9
- const { template = 'basic' } = options;
10
-
30
+ const { template } = options;
31
+
11
32
  console.log(`🚀 创建 Umi4 项目...`);
12
-
33
+
13
34
  // 获取可用模板列表
14
35
  const availableTemplates = await getAvailableTemplates();
15
-
16
- // 如果指定的模板不存在,让用户选择
36
+
17
37
  let selectedTemplate = template;
18
- if (!availableTemplates.includes(template)) {
19
- console.log(chalk.yellow(`⚠️ 模板 "${template}" 不存在`));
20
- console.log(chalk.blue(`📋 可用模板: ${availableTemplates.join(', ')}`));
21
-
38
+
39
+ // 如果没有指定模板,或者指定的模板不存在,让用户选择
40
+ if (!template || !availableTemplates.includes(template)) {
41
+ if (template && !availableTemplates.includes(template)) {
42
+ console.log(chalk.yellow(`⚠️ 模板 "${template}" 不存在`));
43
+ }
44
+
45
+ console.log(chalk.blue(`📋 请选择项目模板:`));
46
+
22
47
  const { chosenTemplate } = await inquirer.prompt([
23
48
  {
24
- type: 'list',
25
- name: 'chosenTemplate',
26
- message: '请选择要使用的模板:',
27
- choices: availableTemplates.map(t => ({
28
- name: t === 'basic' ? `${t} (基础模板)` :
29
- t === 'antd' ? `${t} (Ant Design Pro)` : t,
30
- value: t
31
- }))
32
- }
49
+ type: "list",
50
+ name: "chosenTemplate",
51
+ message: "选择项目模板:",
52
+ choices: templateChoices,
53
+ default: BASE_TEMPLATE, // 默认选择antd
54
+ },
33
55
  ]);
34
56
  selectedTemplate = chosenTemplate;
35
57
  }
36
-
58
+
59
+ console.log(chalk.cyan(`📋 使用模板: ${selectedTemplate}`));
60
+
37
61
  const targetDir = path.resolve(projectName);
38
-
62
+
39
63
  // 检查目录是否已存在
40
64
  if (await fs.pathExists(targetDir)) {
41
65
  const { overwrite } = await inquirer.prompt([
42
66
  {
43
- type: 'confirm',
44
- name: 'overwrite',
67
+ type: "confirm",
68
+ name: "overwrite",
45
69
  message: `目录 ${projectName} 已存在,是否覆盖?`,
46
- default: false
47
- }
70
+ default: false,
71
+ },
48
72
  ]);
49
-
73
+
50
74
  if (!overwrite) {
51
- console.log(chalk.red('❌ 项目创建取消'));
75
+ console.log(chalk.red("❌ 项目创建取消"));
52
76
  return;
53
77
  }
54
-
78
+
55
79
  await fs.remove(targetDir);
56
80
  }
57
-
58
- const spinner = ora('正在创建项目...').start();
59
-
81
+
82
+ const spinner = ora("正在创建项目...").start();
83
+
60
84
  try {
61
85
  // 生成项目文件
62
86
  await generateTemplate(projectName, selectedTemplate, targetDir);
63
-
64
- spinner.succeed('项目文件生成完成');
65
-
66
- console.log(chalk.green('✅ 项目创建成功!'));
67
- console.log('');
87
+
88
+ spinner.succeed("项目文件生成完成");
89
+
90
+ console.log(chalk.green("✅ 项目创建成功!"));
91
+ console.log("");
68
92
  console.log(chalk.cyan(`📁 进入项目目录: cd ${projectName}`));
69
- console.log(chalk.cyan('📦 安装依赖: npm install 或 yarn'));
70
- console.log(chalk.cyan('🚀 启动项目: npm start 或 yarn start'));
71
-
93
+ console.log(chalk.cyan("📦 安装依赖: npm install 或 yarn"));
94
+ console.log(chalk.cyan("🚀 启动项目: npm start 或 yarn start"));
72
95
  } catch (error) {
73
- spinner.fail('项目创建失败');
96
+ spinner.fail("项目创建失败");
74
97
  console.error(chalk.red(error.message));
75
98
  process.exit(1);
76
99
  }
77
100
  }
78
101
 
79
102
  async function initProject(options) {
80
- const { template = 'basic' } = options;
103
+ const { template } = options;
81
104
  const projectName = path.basename(process.cwd());
82
-
105
+
83
106
  console.log(`🚀 初始化 Umi4 项目...`);
84
-
107
+
85
108
  // 获取可用模板列表
86
109
  const availableTemplates = await getAvailableTemplates();
87
-
88
- // 如果指定的模板不存在,让用户选择
110
+
89
111
  let selectedTemplate = template;
90
- if (!availableTemplates.includes(template)) {
91
- console.log(chalk.yellow(`⚠️ 模板 "${template}" 不存在`));
92
- console.log(chalk.blue(`📋 可用模板: ${availableTemplates.join(', ')}`));
93
-
112
+
113
+ // 如果没有指定模板,或者指定的模板不存在,让用户选择
114
+ if (!template || !availableTemplates.includes(template)) {
115
+ if (template && !availableTemplates.includes(template)) {
116
+ console.log(chalk.yellow(`⚠️ 模板 "${template}" 不存在`));
117
+ }
118
+
119
+ console.log(chalk.blue(`📋 请选择项目模板:`));
120
+
94
121
  const { chosenTemplate } = await inquirer.prompt([
95
122
  {
96
- type: 'list',
97
- name: 'chosenTemplate',
98
- message: '请选择要使用的模板:',
99
- choices: availableTemplates.map(t => ({
100
- name: t === 'basic' ? `${t} (基础模板)` :
101
- t === 'antd' ? `${t} (Ant Design Pro)` : t,
102
- value: t
103
- }))
104
- }
123
+ type: "list",
124
+ name: "chosenTemplate",
125
+ message: "选择项目模板:",
126
+ choices: templateChoices,
127
+ default: BASE_TEMPLATE, // 默认选择antd
128
+ },
105
129
  ]);
106
130
  selectedTemplate = chosenTemplate;
107
131
  }
108
-
132
+
133
+ console.log(chalk.cyan(`📋 使用模板: ${selectedTemplate}`));
134
+
109
135
  const targetDir = process.cwd();
110
-
136
+
111
137
  // 检查当前目录是否为空
112
138
  const files = await fs.readdir(targetDir);
113
139
  if (files.length > 0) {
114
140
  const { proceed } = await inquirer.prompt([
115
141
  {
116
- type: 'confirm',
117
- name: 'proceed',
118
- message: '当前目录不为空,是否继续?',
119
- default: false
120
- }
142
+ type: "confirm",
143
+ name: "proceed",
144
+ message: "当前目录不为空,是否继续?",
145
+ default: false,
146
+ },
121
147
  ]);
122
-
148
+
123
149
  if (!proceed) {
124
- console.log(chalk.red('❌ 项目初始化取消'));
150
+ console.log(chalk.red("❌ 项目初始化取消"));
125
151
  return;
126
152
  }
127
153
  }
128
-
129
- const spinner = ora('正在初始化项目...').start();
130
-
154
+
155
+ const spinner = ora("正在初始化项目...").start();
156
+
131
157
  try {
132
158
  // 生成项目文件
133
159
  await generateTemplate(projectName, selectedTemplate, targetDir);
134
-
135
- spinner.succeed('项目文件生成完成');
136
-
137
- console.log(chalk.green('✅ 项目初始化成功!'));
138
- console.log('');
139
- console.log(chalk.cyan('📦 安装依赖: npm install 或 yarn'));
140
- console.log(chalk.cyan('🚀 启动项目: npm start 或 yarn start'));
141
-
160
+
161
+ spinner.succeed("项目文件生成完成");
162
+
163
+ console.log(chalk.green("✅ 项目初始化成功!"));
164
+ console.log("");
165
+ console.log(chalk.cyan("📦 安装依赖: npm install 或 yarn"));
166
+ console.log(chalk.cyan("🚀 启动项目: npm start 或 yarn start"));
142
167
  } catch (error) {
143
- spinner.fail('项目初始化失败');
168
+ spinner.fail("项目初始化失败");
144
169
  console.error(chalk.red(error.message));
145
170
  process.exit(1);
146
171
  }
@@ -148,5 +173,5 @@ async function initProject(options) {
148
173
 
149
174
  module.exports = {
150
175
  createProject,
151
- initProject
152
- };
176
+ initProject,
177
+ };
@@ -1,65 +1,49 @@
1
- # {{projectName}}
1
+ # Umi 4 + Ant Design Pro 项目
2
2
 
3
- 这是一个使用 cfmm-cli-umi 脚手架创建的 Umi 4 + Ant Design Pro 项目。
4
-
5
- ## 特性
6
-
7
- - 🚀 基于 Umi 4 和 Ant Design 5
8
- - 📦 开箱即用的 Pro Components
9
- - 🎨 美观的管理后台界面
10
- - 📱 响应式设计
11
- - 🔐 内置权限管理
12
- - 📈 丰富的图表组件
3
+ 这是一个使用 @ysjdemo/umi-create-cli 脚手架创建的 Umi 4 + Ant Design Pro 项目。
13
4
 
14
5
  ## 开始使用
15
6
 
16
- ### 安装依赖
17
-
18
7
  ```bash
8
+ # 安装依赖
19
9
  npm install
20
- # 或
21
- yarn
22
- ```
23
10
 
24
- ### 启动开发服务器
25
-
26
- ```bash
11
+ # 启动开发服务器
27
12
  npm start
28
- # 或
29
- yarn start
30
- ```
31
-
32
- ### 构建生产版本
33
13
 
34
- ```bash
14
+ # 构建生产版本
35
15
  npm run build
36
- # 或
37
- yarn build
38
16
  ```
39
17
 
40
- ## 项目结构
18
+ ## 功能特性
41
19
 
42
- ```
43
- ├── src/
44
- │ ├── components/ # 通用组件
45
- │ ├── pages/ # 页面组件
46
- │ │ ├── Dashboard/ # 仪表盘
47
- │ │ ├── Users/ # 用户管理
48
- │ │ └── Settings/ # 系统设置
49
- │ ├── services/ # API 服务
50
- │ └── utils/ # 工具函数
51
- ├── .umirc.ts # Umi 配置文件
52
- └── package.json
53
- ```
20
+ - ⚡️ Umi 4 - 现代化的前端框架
21
+ - 🎨 Ant Design 5.0 - 企业级 UI 设计语言
22
+ - 📦 Pro Components - 丰富的业务组件
23
+ - 🛡️ TypeScript - 静态类型检查
24
+ - 📱 响应式设计 - 适配不同终端
25
+
26
+ ## 已集成功能
54
27
 
55
- ## 页面说明
28
+ - 📊 仪表盘页面
29
+ - 👥 用户管理
30
+ - 📋 表格列表
31
+ - 📝 表单页面
32
+ - ⚙️ 设置页面
56
33
 
57
- - **仪表盘**: 数据统计展示
58
- - **用户管理**: 用户列表和管理
59
- - **系统设置**: 应用配置管理
34
+ ## 目录结构
35
+
36
+ ```
37
+ src/
38
+ ├── components/ # 业务组件
39
+ ├── pages/ # 页面组件
40
+ ├── services/ # API 服务
41
+ ├── utils/ # 工具函数
42
+ └── models/ # 数据模型
43
+ ```
60
44
 
61
- ## 更多信息
45
+ ## 了解更多
62
46
 
63
- - [Umi 4 文档](https://umijs.org/)
47
+ - [Umi 官方文档](https://umijs.org/)
64
48
  - [Ant Design 文档](https://ant.design/)
65
49
  - [Pro Components 文档](https://procomponents.ant.design/)
@@ -1,7 +1,8 @@
1
1
  {
2
- "name": "{{projectName}}",
2
+ "name": "my-umi-antd-project",
3
3
  "private": true,
4
- "author": "cfmm-cli-umi",
4
+ "author": "@ysjdemo/umi-create-cli",
5
+ "version": "1.0.0",
5
6
  "scripts": {
6
7
  "build": "umi build",
7
8
  "dev": "umi dev",
@@ -1,46 +1,38 @@
1
- # {{projectName}}
1
+ # Umi 4 项目
2
2
 
3
- 这是一个使用 cfmm-cli-umi 脚手架创建的 Umi 4 项目。
3
+ 这是一个使用 @ysjdemo/umi-create-cli 脚手架创建的 Umi 4 项目。
4
4
 
5
5
  ## 开始使用
6
6
 
7
- ### 安装依赖
8
-
9
7
  ```bash
8
+ # 安装依赖
10
9
  npm install
11
- # 或
12
- yarn
13
- ```
14
-
15
- ### 启动开发服务器
16
10
 
17
- ```bash
11
+ # 启动开发服务器
18
12
  npm start
19
- # 或
20
- yarn start
21
- ```
22
13
 
23
- ### 构建生产版本
24
-
25
- ```bash
14
+ # 构建生产版本
26
15
  npm run build
27
- # 或
28
- yarn build
29
16
  ```
30
17
 
31
- ## 项目结构
18
+ ## 功能特性
19
+
20
+ - ⚡️ Umi 4 - 现代化的前端框架
21
+ - 📦 开箱即用的配置
22
+ - 🎨 TypeScript 支持
23
+ - 📱 响应式设计
24
+
25
+ ## 目录结构
32
26
 
33
27
  ```
34
- ├── src/
35
- ├── components/ # 通用组件
36
- ├── pages/ # 页面组件
37
- ├── services/ # API 服务
38
- └── utils/ # 工具函数
39
- ├── .umirc.ts # Umi 配置文件
40
- └── package.json
28
+ src/
29
+ ├── components/ # 组件目录
30
+ ├── pages/ # 页面目录
31
+ ├── services/ # 服务层
32
+ └── utils/ # 工具函数
41
33
  ```
42
34
 
43
- ## 更多信息
35
+ ## 了解更多
44
36
 
45
- - [Umi 4 文档](https://umijs.org/)
46
- - [Ant Design 文档](https://ant.design/)
37
+ - [Umi 官方文档](https://umijs.org/)
38
+ - [React 官方文档](https://reactjs.org/)
@@ -1,7 +1,8 @@
1
1
  {
2
- "name": "{{projectName}}",
2
+ "name": "my-umi-project",
3
3
  "private": true,
4
- "author": "cfmm-cli-umi",
4
+ "author": "@ysjdemo/umi-create-cli",
5
+ "version": "1.0.0",
5
6
  "scripts": {
6
7
  "build": "umi build",
7
8
  "dev": "umi dev",
@@ -1,22 +1,38 @@
1
- import { PageContainer } from '@ant-design/pro-components';
2
- import { Card, Typography } from 'antd';
3
1
  import React from 'react';
4
-
5
- const { Title, Paragraph } = Typography;
2
+ import styles from './index.less';
6
3
 
7
4
  const HomePage: React.FC = () => {
8
5
  return (
9
- <PageContainer>
10
- <Card>
11
- <Title level={2}>欢迎使用 Umi 4!</Title>
12
- <Paragraph>
13
- 这是一个使用 cfmm-cli-umi 脚手架创建的基础 Umi 4 项目。
14
- </Paragraph>
15
- <Paragraph>
16
- 你可以开始编辑 <code>src/pages/Home/index.tsx</code> 来开发你的应用。
17
- </Paragraph>
18
- </Card>
19
- </PageContainer>
6
+ <div className={styles.container}>
7
+ <h1 className={styles.title}>
8
+ 欢迎使用 Umi 4 项目
9
+ </h1>
10
+ <p className={styles.description}>
11
+ 这是一个使用 @ysjdemo/umi-create-cli 脚手架创建的基础 Umi 4 项目。
12
+ </p>
13
+ <div className={styles.features}>
14
+ <div className={styles.feature}>
15
+ <h3>🚀 现代化</h3>
16
+ <p>基于最新的 Umi 4 框架构建</p>
17
+ </div>
18
+ <div className={styles.feature}>
19
+ <h3>📦 开箱即用</h3>
20
+ <p>预配置了常用的开发工具</p>
21
+ </div>
22
+ <div className={styles.feature}>
23
+ <h3>🎨 TypeScript</h3>
24
+ <p>完整的 TypeScript 支持</p>
25
+ </div>
26
+ </div>
27
+ <div className={styles.actions}>
28
+ <a href="https://umijs.org/" target="_blank" rel="noopener noreferrer">
29
+ 查看 Umi 文档
30
+ </a>
31
+ <a href="https://github.com/Ivan-YangSj/umi-cli" target="_blank" rel="noopener noreferrer">
32
+ GitHub 仓库
33
+ </a>
34
+ </div>
35
+ </div>
20
36
  );
21
37
  };
22
38
 
@@ -1,51 +1,81 @@
1
1
  const fs = require('fs-extra');
2
2
  const path = require('path');
3
3
 
4
- // 模板变量替换函数
4
+ /**
5
+ * 模板变量替换函数
6
+ * 将模板文件中的占位符(如{{projectName}})替换为实际的值
7
+ * @param {string} content - 文件内容
8
+ * @param {object} variables - 变量对象,包含要替换的键值对
9
+ * @returns {string} 替换后的内容
10
+ */
5
11
  function replaceTemplateVariables(content, variables) {
6
12
  let result = content;
13
+ // 遍历所有变量,逐一替换
7
14
  for (const [key, value] of Object.entries(variables)) {
15
+ // 创建占位符格式:{{变量名}}
8
16
  const placeholder = `{{${key}}}`;
17
+ // 全局替换所有匹配的占位符
9
18
  result = result.replace(new RegExp(placeholder, 'g'), value || '');
10
19
  }
11
20
  return result;
12
21
  }
13
22
 
14
- // 递归复制目录并替换模板变量
23
+ /**
24
+ * 递归复制目录并替换模板变量
25
+ * 这是核心函数,负责将模板目录完整复制到目标位置,并处理模板变量
26
+ * @param {string} srcDir - 源目录路径(模板目录)
27
+ * @param {string} destDir - 目标目录路径(项目生成位置)
28
+ * @param {object} variables - 模板变量对象
29
+ */
15
30
  async function copyTemplateDir(srcDir, destDir, variables) {
31
+ // 确保目标目录存在,如果不存在则创建
16
32
  await fs.ensureDir(destDir);
17
33
 
34
+ // 读取源目录下的所有文件和文件夹
18
35
  const items = await fs.readdir(srcDir);
19
36
 
37
+ // 遍历每个项目(文件或文件夹)
20
38
  for (const item of items) {
21
- const srcPath = path.join(srcDir, item);
22
- const destPath = path.join(destDir, item);
39
+ const srcPath = path.join(srcDir, item); // 源文件/文件夹的完整路径
40
+ const destPath = path.join(destDir, item); // 目标文件/文件夹的完整路径
23
41
 
42
+ // 获取文件/文件夹的统计信息
24
43
  const stat = await fs.stat(srcPath);
25
44
 
26
45
  if (stat.isDirectory()) {
27
- // 递归处理子目录
46
+ // 如果是目录,递归调用自己,复制整个子目录
28
47
  await copyTemplateDir(srcPath, destPath, variables);
29
48
  } else {
30
- // 处理文件
49
+ // 如果是文件,读取文件内容并处理模板变量
31
50
  const content = await fs.readFile(srcPath, 'utf8');
51
+ // 替换文件中的模板变量(如{{projectName}})
32
52
  const processedContent = replaceTemplateVariables(content, variables);
53
+ // 将处理后的内容写入目标文件
33
54
  await fs.writeFile(destPath, processedContent);
34
55
  }
35
56
  }
36
57
  }
37
58
 
59
+ /**
60
+ * 生成模板项目的主函数
61
+ * @param {string} projectName - 项目名称
62
+ * @param {string} templateType - 模板类型(如react、vue等)
63
+ * @param {string} targetDir - 目标生成目录
64
+ */
38
65
  async function generateTemplate(projectName, templateType, targetDir) {
66
+ // 获取模板根目录路径
39
67
  const templatesDir = path.join(__dirname, './');
68
+ // 构建特定模板目录路径
40
69
  const templateDir = path.join(templatesDir, templateType);
70
+ // 构建通用文件目录路径
41
71
  const commonDir = path.join(templatesDir, 'common');
42
72
 
43
- // 检查模板是否存在
73
+ // 检查指定的模板是否存在
44
74
  if (!await fs.pathExists(templateDir)) {
45
75
  throw new Error(`模板 "${templateType}" 不存在`);
46
76
  }
47
77
 
48
- // 模板变量
78
+ // 定义模板变量,这些变量会在模板文件中被替换
49
79
  const variables = {
50
80
  projectName: projectName || 'my-umi-app'
51
81
  };
@@ -53,17 +83,25 @@ async function generateTemplate(projectName, templateType, targetDir) {
53
83
  // 确保目标目录存在
54
84
  await fs.ensureDir(targetDir);
55
85
 
56
- // 首先创建基础目录结构
57
- const baseDirs = ['src/pages', 'src/components', 'src/services', 'src/utils'];
86
+ // 创建项目的基础目录结构
87
+ // 这些是前端项目常用的目录结构
88
+ const baseDirs = [
89
+ 'src/pages', // 页面组件目录
90
+ 'src/components', // 公共组件目录
91
+ 'src/services', // API服务目录
92
+ 'src/utils' // 工具函数目录
93
+ ];
94
+
95
+ // 遍历并创建所有基础目录
58
96
  for (const dir of baseDirs) {
59
97
  await fs.ensureDir(path.join(targetDir, dir));
60
98
  }
61
99
 
62
- // 复制模板特定的文件
100
+ // 复制模板特定的文件(如React模板、Vue模板等)
63
101
  console.log(`📂 正在复制模板文件...`);
64
102
  await copyTemplateDir(templateDir, targetDir, variables);
65
103
 
66
- // 复制通用文件
104
+ // 复制通用文件(如配置文件、README等,所有模板都需要的文件)
67
105
  if (await fs.pathExists(commonDir)) {
68
106
  console.log(`📄 正在复制通用配置文件...`);
69
107
  await copyTemplateDir(commonDir, targetDir, variables);
@@ -72,14 +110,20 @@ async function generateTemplate(projectName, templateType, targetDir) {
72
110
  console.log(`✅ 模板文件复制完成`);
73
111
  }
74
112
 
75
- // 获取可用的模板列表
113
+ /**
114
+ * 获取所有可用的模板列表
115
+ * 扫描模板目录,返回所有可用的模板类型
116
+ * @returns {Array<string>} 可用模板列表
117
+ */
76
118
  async function getAvailableTemplates() {
77
119
  const templatesDir = path.join(__dirname, './');
78
120
 
121
+ // 如果模板目录不存在,返回空数组
79
122
  if (!await fs.pathExists(templatesDir)) {
80
123
  return [];
81
124
  }
82
125
 
126
+ // 读取模板目录下的所有项目
83
127
  const items = await fs.readdir(templatesDir);
84
128
  const templates = [];
85
129
 
@@ -87,7 +131,8 @@ async function getAvailableTemplates() {
87
131
  const itemPath = path.join(templatesDir, item);
88
132
  const stat = await fs.stat(itemPath);
89
133
 
90
- // 排除common目录和index.js文件,只返回实际的模板目录
134
+ // 只返回目录类型的模板,排除common目录和index.js文件
135
+ // common目录是通用文件目录,不是模板类型
91
136
  if (stat.isDirectory() && item !== 'common') {
92
137
  templates.push(item);
93
138
  }
@@ -96,7 +141,8 @@ async function getAvailableTemplates() {
96
141
  return templates;
97
142
  }
98
143
 
144
+ // 导出主要功能函数
99
145
  module.exports = {
100
- generateTemplate,
101
- getAvailableTemplates
146
+ generateTemplate, // 生成模板项目
147
+ getAvailableTemplates // 获取可用模板列表
102
148
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ysjdemo/umi-create-cli",
3
3
  "author": "ysj <411367308@qq.com>",
4
- "version": "0.0.1",
4
+ "version": "0.0.3",
5
5
  "description": "一个用于创建Umi4项目的脚手架工具",
6
6
  "main": "index.js",
7
7
  "bin": {
@@ -11,7 +11,6 @@
11
11
  "start": "node bin/cli.js",
12
12
  "test": "echo \"Error: no test specified\" && exit 1",
13
13
  "prepublishOnly": "echo 'Preparing to publish...'",
14
- "publish:auto": "node scripts/publish.js",
15
14
  "version:patch": "npm version patch",
16
15
  "version:minor": "npm version minor",
17
16
  "version:major": "npm version major"
@@ -29,12 +28,12 @@
29
28
  "license": "MIT",
30
29
  "repository": {
31
30
  "type": "git",
32
- "url": "https://github.com/yourusername/cfmm-cli-umi.git"
31
+ "url": "https://github.com/Ivan-YangSj/umi-cli.git"
33
32
  },
34
33
  "bugs": {
35
- "url": "https://github.com/yourusername/cfmm-cli-umi/issues"
34
+ "url": "https://github.com/Ivan-YangSj/umi-cli/issues"
36
35
  },
37
- "homepage": "https://github.com/yourusername/cfmm-cli-umi#readme",
36
+ "homepage": "https://github.com/Ivan-YangSj/umi-cli#readme",
38
37
  "publishConfig": {
39
38
  "access": "public"
40
39
  },