【开源】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:欢迎修复问题、补文档、提功能建议

项目链接与文档

相关推荐
逝川长叹8 分钟前
利用 SSI-COV 算法自动识别线状结构在环境振动下的模态参数研究(Matlab代码实现)
前端·算法·支持向量机·matlab
xkxnq12 分钟前
第一阶段:Vue 基础入门(第 13天)
前端·javascript·vue.js
qq_4198540514 分钟前
Excel预览
前端
PieroPc23 分钟前
用FastAPI 后端 和 Vue3 前端写一个博客系统 例
前端·vue·fastapi
赵民勇31 分钟前
ES5中prototype和prototype.constructor详解
javascript
xiaoyustudiowww33 分钟前
fetch异步简单版本(Tomcat 9)
java·前端·tomcat
China_Yanhy33 分钟前
Ansible 工业级项目标准化架构指南 (V1.0)
架构·ansible
TOPGUS33 分钟前
谷歌Chrome浏览器即将对HTTP网站设卡:突出展示“始终使用安全连接”功能
前端·网络·chrome·http·搜索引擎·seo·数字营销
一条咸鱼_SaltyFish34 分钟前
[Day13] 微服务架构下的共享基础库设计:contract-common 模块实践
开发语言·人工智能·微服务·云原生·架构·ai编程
C_心欲无痕40 分钟前
ts - 模板字面量类型与 `keyof` 的魔法组合:`keyof T & `on${string}`使用
linux·运维·开发语言·前端·ubuntu·typescript