为什么需要它
- 新项目起步总是重复劳动:选 React/Vue、JS/TS、Vite/Webpack、是否加 Router/Lint/状态管理、还要补企业规范
- 官方脚手架偏"起项目",不擅长"统一团队规范"与"快速扩展插件"
- create-web-app 把这些选项收敛到一次顺滑的交互里,并支持直达模式一键生成
核心能力
- 多引擎模式
- 原生引擎:内置 React/Vue 模板,按需启用插件、选择打包器,生成后即可跑。
- 外部引擎代理:一键代理 create-vite、Umi、Next、CRA 等,保留后续扩展空间
- 可插拔插件系统
- 插件用"配置"描述依赖、文件、转换,不写脚手架逻辑也能增强模板。
- 内置 Router、ESLint+Prettier、状态管理(Zustand/Redux/Pinia)、打包器(Vite/Webpack)等。
- 自由选择打包器
- 选择 Vite 或 Webpack,自动覆盖
scripts和依赖,模板随上下文调整。 - Webpack 下自动移除 Vite 入口脚本;React 模板启用
runtime: 'automatic',避免"React 未定义"
- 选择 Vite 或 Webpack,自动覆盖
- 直达模式与交互式
- 交互式引导;也支持命令行选项直达,无需任何提问
- TypeScript/HTML 智能调整
- TS 下自动生成
tsconfig.json,并针对打包器设定moduleResolution。 - Vue 模板自动生成
env.d.ts(Webpack)或vite-env.d.ts(Vite),避免类型告警
- TS 下自动生成
快速开始
bash
npm i dc-create-web-app -g
- 全局安装并使用:
bash
create-web-app my-app
- 直达模式(跳过交互):
bash
create-web-app my-app --engine native --framework react --language ts --bundler webpack --plugins router,lint,zustand
- 在仓库脚本里透传参数(注意
--):
bash
pnpm dev -- --engine native --framework vue --language ts --bundler vite --plugins router,pinia
你会得到
- 结构清晰的项目目录、可用的开发/构建脚本、合理的依赖
- 根据选择自动生成/清理配置(如选择 Webpack 时删除
vite.config.*并注入HtmlWebpackPlugin) - TS 场景自动写入
tsconfig.json与类型依赖,React/Vue 的类型与入口随打包器自动修正 - Router/状态管理/Lint 等插件按需启用,不强迫绑定
典型组合示例
- React + TS + Webpack + Router + Lint:
bash
create-web-app my-app --engine native --framework react --language ts --bundler webpack --plugins router,lint
- Vue + Vite 快速开发:
bash
create-web-app my-app --engine native --framework vue --language js --bundler vite
- 直接用 create-vite(交给官方交互):
bash
create-web-app my-app --engine vite --framework react
架构与实现要点
- 交互与直达解析:
run.js聚合 CLI 选项与交互选择,统一生成摘要与最终配置 - 模板服务:
template.js负责复制模板、打包器/语言适配、插件注入与代码转换。 - 插件注册表:
plugin-registry.js用"配置"声明插件的依赖、文件、转换,按framework/common分组。 - 打包器插件:
bundler-vite:覆盖scripts/依赖,透传@vitejs/plugin-react或@vitejs/plugin-vue。bundler-webpack:写入webpack.config.js(ESM)、HtmlWebpackPlugin注入入口;移除 Vite 的<script type="module">
END
- Star 支持:你的一个 Star,是我们持续打磨的动力
- 贡献插件/模板:在
src/config/plugins与src/templates中新增或改进 - 提交 Issue/PR:欢迎修复问题、补文档、提功能建议
项目链接与文档