前端脚手架设计与实现 · 课程目录

脚手架概述

什么是前端脚手架、解决的问题、Vue CLI / CRA / Vite 对比

安装与版本管理、npm/yarn/pnpm、CommonJS 与 ES Module

命令行工具入门

process.argv、commander、inquirer 交互式问答

文件系统操作

fs 核心 API、path 处理、递归创建目录、模板复制

模板引擎选型

EJS 语法、Handlebars 对比、变量注入、条件循环

项目初始化流程

用户输入收集、名称校验、目录冲突、进度条

配置文件生成

package.json / tsconfig / .env / .gitignore 动态生成

依赖安装机制

spawn/exec 执行 npm install、进度反馈、离线缓存

Git 初始化与提交

git init 自动化、.gitignore、初始 commit、远程关联

插件系统设计

插件生命周期、钩子函数 (before/after)、注册加载

模板市场概念

远程模板仓库、版本管理、搜索与推荐算法

交互式 UI 增强

ora 加载动画、chalk 彩色输出、listr 任务列表、clui

配置文件持久化

rc 文件规范、JSON/YAML 解析、配置合并策略

多模板支持

模板分类 (PC/移动端/库)、参数化、继承与覆盖

自定义命令注册

commander 子命令、别名、参数校验、--help 增强

错误处理与日志

try-catch 全局捕获、ora 失败、winston 分级、上报

jest 配置、commander 测试、文件 mock、快照测试

GitHub Actions、npm publish 自动化、版本升级

懒加载模板、缓存编译、并行文件操作、GC 调优

命令注入防护、路径遍历、依赖锁定、npm audit

国际化支持

i18n 方案对比、语言包加载、中文提示、多语言模板

升级迁移机制

版本对比、breaking change 检测、配置迁移、引导升级

脚手架发布

npm 发布、semver 版本、changelog、自检清单

用户反馈收集

内置反馈命令、匿名上报、满意度调查、issue 自动创建

README 自动生成、API 文档、示例项目、在线站点

--debug 标志、verbose 日志、断点支持、性能分析

兼容性处理

Windows 路径、不同 Shell、Node 版本、终端编码

扩展生态建设

社区插件规范、插件市场、评分系统、安全审核

React+TypeScript 脚手架、路由/状态管理/请求库集成

AI 辅助脚手架、WebContainer、低代码、Deno/Bun 适配