create-dev-to 1.0.0
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 +148 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +590 -0
- package/dist/index.js.map +1 -0
- package/dist/installLogger.d.ts +29 -0
- package/dist/installLogger.d.ts.map +1 -0
- package/dist/installLogger.js +252 -0
- package/dist/installLogger.js.map +1 -0
- package/dist/outputParsers.d.ts +29 -0
- package/dist/outputParsers.d.ts.map +1 -0
- package/dist/outputParsers.js +259 -0
- package/dist/outputParsers.js.map +1 -0
- package/dist/visualComponents.d.ts +35 -0
- package/dist/visualComponents.d.ts.map +1 -0
- package/dist/visualComponents.js +247 -0
- package/dist/visualComponents.js.map +1 -0
- package/package.json +30 -0
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# create-dev-to
|
|
2
|
+
|
|
3
|
+
快速创建集成 `@dev-to/react-plugin` 的前端项目脚手架。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 🎯 **多框架支持** - 支持 React(其他框架即将推出)
|
|
8
|
+
- ✨ **美观的安装体验** - 分阶段进度显示、渐变色、实时统计
|
|
9
|
+
- 🚀 **自动配置** - 自动注入 `@dev-to/react-plugin` 到项目
|
|
10
|
+
- 🎨 **丰富的模板** - TypeScript、JavaScript、SWC 等多种选择
|
|
11
|
+
- 📦 **包管理器无关** - 支持 pnpm、npm、yarn、bun
|
|
12
|
+
|
|
13
|
+
## 使用方法
|
|
14
|
+
|
|
15
|
+
### 方式一:使用 create 命令(推荐)
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# 使用 pnpm
|
|
19
|
+
pnpm create dev-to
|
|
20
|
+
|
|
21
|
+
# 使用 npm
|
|
22
|
+
npm create dev-to
|
|
23
|
+
|
|
24
|
+
# 使用 yarn
|
|
25
|
+
yarn create dev-to
|
|
26
|
+
|
|
27
|
+
# 使用 bun
|
|
28
|
+
bun create dev-to
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 方式二:直接使用 npx/dlx
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
# 使用 pnpm
|
|
35
|
+
pnpm dlx create-dev-to
|
|
36
|
+
|
|
37
|
+
# 使用 npm
|
|
38
|
+
npx create-dev-to
|
|
39
|
+
|
|
40
|
+
# 使用 yarn
|
|
41
|
+
yarn dlx create-dev-to
|
|
42
|
+
|
|
43
|
+
# 使用 bun
|
|
44
|
+
bunx create-dev-to
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## 交互式创建流程
|
|
48
|
+
|
|
49
|
+
运行命令后,你将看到:
|
|
50
|
+
|
|
51
|
+
1. **📝 项目名称** - 输入你的项目名称
|
|
52
|
+
2. **📦 包管理器** - 选择 pnpm、npm、yarn 或 bun
|
|
53
|
+
3. **🎯 框架选择** - 选择 React(其他框架即将支持)
|
|
54
|
+
4. **🎨 模板变体** - 选择 TypeScript、JavaScript、SWC 等
|
|
55
|
+
5. **⚡ Rolldown** - 选择是否使用实验性的 Rolldown 打包器
|
|
56
|
+
6. **✨ 自动安装** - 美观的进度显示和实时统计
|
|
57
|
+
|
|
58
|
+
## 支持的框架
|
|
59
|
+
|
|
60
|
+
| 框架 | 状态 |
|
|
61
|
+
|------|------|
|
|
62
|
+
| React | ✅ 已支持 |
|
|
63
|
+
| Vue | 🚧 即将推出 |
|
|
64
|
+
| Svelte | 🚧 即将推出 |
|
|
65
|
+
| Solid | 🚧 即将推出 |
|
|
66
|
+
| Preact | 🚧 即将推出 |
|
|
67
|
+
| Lit | 🚧 即将推出 |
|
|
68
|
+
| Qwik | 🚧 即将推出 |
|
|
69
|
+
| Vanilla | 🚧 即将推出 |
|
|
70
|
+
|
|
71
|
+
## React 模板
|
|
72
|
+
|
|
73
|
+
当选择 React 框架时,你可以选择:
|
|
74
|
+
|
|
75
|
+
- **TypeScript** - 使用 TypeScript 的 React 项目
|
|
76
|
+
- **TypeScript + SWC** - 使用 SWC 编译的 TypeScript React 项目(更快的构建速度)
|
|
77
|
+
- **JavaScript** - 使用 JavaScript 的 React 项目
|
|
78
|
+
- **JavaScript + SWC** - 使用 SWC 编译的 JavaScript React 项目
|
|
79
|
+
|
|
80
|
+
创建完成后会自动在 `vite.config.*` 中注入 `@dev-to/react-plugin`(`devToReactPlugin()`)。
|
|
81
|
+
|
|
82
|
+
## 安装进度展示
|
|
83
|
+
|
|
84
|
+
我们重新设计了依赖安装体验,提供:
|
|
85
|
+
|
|
86
|
+
- 📊 **三阶段进度** - 解析(🔍)、下载(⬇️)、安装(📦)
|
|
87
|
+
- 🌈 **渐变色进度条** - 美观的视觉反馈
|
|
88
|
+
- 📈 **实时统计** - 包数量、耗时、下载速度
|
|
89
|
+
- 💾 **磁盘占用** - 显示 node_modules 大小
|
|
90
|
+
- 🎨 **自动降级** - 在 CI/CD 环境自动使用简化输出
|
|
91
|
+
|
|
92
|
+
## 环境变量
|
|
93
|
+
|
|
94
|
+
你可以通过环境变量自定义行为:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
# 禁用美观的日志输出
|
|
98
|
+
INSTALL_LOGGER=false pnpm create dev-to
|
|
99
|
+
|
|
100
|
+
# 使用简化的日志样式
|
|
101
|
+
INSTALL_LOGGER_STYLE=simple pnpm create dev-to
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## 示例
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
$ pnpm create dev-to
|
|
108
|
+
|
|
109
|
+
┌ create-dev-to
|
|
110
|
+
│
|
|
111
|
+
◆ Project name:
|
|
112
|
+
│ my-awesome-app
|
|
113
|
+
│
|
|
114
|
+
◆ Select a package manager:
|
|
115
|
+
│ ● pnpm
|
|
116
|
+
│
|
|
117
|
+
◆ Select a framework:
|
|
118
|
+
│ ● React
|
|
119
|
+
│ ○ Vue (Coming soon)
|
|
120
|
+
│ ○ Svelte (Coming soon)
|
|
121
|
+
│
|
|
122
|
+
◆ Select a variant:
|
|
123
|
+
│ ● TypeScript
|
|
124
|
+
│
|
|
125
|
+
◆ Use Rolldown for bundling? (Experimental)
|
|
126
|
+
│ No
|
|
127
|
+
│
|
|
128
|
+
◆ Installing Dependencies
|
|
129
|
+
│
|
|
130
|
+
│ 🔍 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Resolving packages 100%
|
|
131
|
+
│ ⬇️ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Downloading 100%
|
|
132
|
+
│ 📦 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Installing 100%
|
|
133
|
+
│
|
|
134
|
+
│ Packages: +245 Time: 8.5s Speed: 2.5 MB/s
|
|
135
|
+
│
|
|
136
|
+
✨ Installation Complete!
|
|
137
|
+
│
|
|
138
|
+
│ Packages: +245 added
|
|
139
|
+
│ Duration: 8.5s
|
|
140
|
+
│ Avg Speed: 2.5 MB/s
|
|
141
|
+
│ Disk Usage: 142.8 MB
|
|
142
|
+
│
|
|
143
|
+
└ Done
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## License
|
|
147
|
+
|
|
148
|
+
MIT
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
|