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

项目链接与文档

相关推荐
葡萄城技术团队5 小时前
1000 人协同压测的环境瓶颈排查:CPU 争用与 Wi\-Fi
前端
Shulex5 小时前
跨境电商 AI Agent 核心架构解析:从只读问答到自主执行的工程落地
人工智能·架构·智能客服·跨境电商
钱工的门窗技术笔记6 小时前
室内极窄全景移门的支承路径与预留接口:轨道形式、型材壁厚口径与验收边界
物联网·架构·数据分析
excel6 小时前
Marked 与 Markdown 有什么区别?该怎么选?
前端
码农小旋风6 小时前
Ray分布式计算引擎介绍
人工智能·架构
ZhengEnCi6 小时前
Agent 架构怎么选:从单 Agent 到多 Agent 编排的选型决策指南
算法·架构
星融元asterfusion7 小时前
工业网络升级实战:100G 双轨 Leaf-Spine 架构破解高并发出货网络瓶颈
网络·架构·spine
Da Da 泓7 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
天远数科7 小时前
零信任架构实战:基于天远企业法人四要素高级版构建自动化供应商资质穿透核验网关
人工智能·架构·自动化
zxcvb1538 小时前
远程查看本地文档:一条轻量 Web 文件服务的工程化链路
前端·远程查看文档