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

项目链接与文档

相关推荐
Nayana1 小时前
webWorker 初步体验
前端·javascript
贝塔实验室1 小时前
Altium Designer 6.0 初学教程-如何生成一个集成库并且实现对库的管理
linux·服务器·前端·fpga开发·硬件架构·基带工程·pcb工艺
Amy_yang1 小时前
从随机排序到公平洗牌:JavaScript随机抽取问题的优化之路
javascript·性能优化
apollo_qwe1 小时前
在 JavaScript(包括 ES 规范)开发中,常用的方法可以按数组、对象、字符串、循环 / 迭代等类别整理
javascript
芒鸽1 小时前
Kuikly Compose vs. Jetpack Compose:一套代码实现真正的全平台原生渲染
前端
w***37511 小时前
SpringMVC 请求参数接收
前端·javascript·算法
shikisuki1 小时前
从 0 到 1 手撸一个生产级个人智能仪表盘(求star~)
前端
flashlight_hi2 小时前
LeetCode 分类刷题:112. 路径总和
javascript·算法·leetcode