【开源】create-web-app:多引擎可插拔的前端脚手架

为什么需要它

  • 新项目起步总是重复劳动:选 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 未定义"
  • 直达模式与交互式
    • 交互式引导;也支持命令行选项直达,无需任何提问
  • TypeScript/HTML 智能调整
    • TS 下自动生成 tsconfig.json,并针对打包器设定 moduleResolution
    • Vue 模板自动生成 env.d.ts(Webpack)或 vite-env.d.ts(Vite),避免类型告警

快速开始

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/pluginssrc/templates 中新增或改进
  • 提交 Issue/PR:欢迎修复问题、补文档、提功能建议

项目链接与文档

相关推荐
煜bart几秒前
使用 TypeScript 实现算法处理
开发语言·前端·javascript
TechMasterPlus2 分钟前
FilAPP 技术深度解析:基于 Filecoin 的去中心化文件存储应用架构
架构·去中心化·区块链
不懂的浪漫5 分钟前
mqtt-plus 架构解析(七):动态订阅与重连恢复,为什么能走同一条协调路径
java·物联网·mqtt·架构
Mike_jia13 分钟前
NginxPulse:Nginx日志监控革命!实时洞察Web流量与安全态势的智能利器
前端
风之舞_yjf18 分钟前
Vue基础(31)_插件(plugins)、scoped样式
前端·vue.js
William_cl25 分钟前
C# ASP.NET 分层架构实战:BLL (Service) 业务层从入门到封神(规范 + 避坑)
架构·c#·asp.net
M ? A26 分钟前
Vue3+TS实战避坑指南
前端·vue.js·经验分享
Mintopia32 分钟前
你以为是技术问题,其实是流程问题:工程效率的真相
前端
分布式存储与RustFS34 分钟前
MinIO迎来“恶龙”?RustFS这款开源存储简直“不讲武德”
架构·rust·开源·对象存储·minio·企业存储·rustfs
Mintopia38 分钟前
一套能落地的"防 Bug"习惯:不用加班也能少出错
前端