HTML项目脚手架重构：基于Yeoman定制个性化HTML工程模版的方法-html教程-PHP中文网

yeoman仍是html项目脚手架最稳妥方案，支持命令行交互与模板批量生成，但构建配置需手动集成；generator名必须为generator-xxx格式，npm publish后用户通过yo xxx调用。

html项目脚手架重构：基于yeoman定制个性化html工程模版的方法

直接说结论：Yeoman 仍是目前最稳妥、可维护性最强的 HTML 项目脚手架定制方案，尤其适合需要命令行交互 + 模板变量填充 + 多文件批量生成的场景；但别指望它自动处理构建流程，webpack 或 vite 配置得自己写、自己注入。

generator 名字必须是 `generator-xxx` 格式

这是 Yeoman 的硬性约定，不是建议。如果你 npm publish 一个叫 my-html-scaffold 的包，用户执行 yo my-html-scaffold 会报错：Error: Cannot find module 'generator-my-html-scaffold' —— 因为 yo 默认只找 generator- 开头的包。

实际操作时：

初始化项目用 yarn init 或 npm init，包名填 generator-html-boilerplate
package.json 中的 name 字段必须严格匹配，不能带空格或下划线（只允许短横线）
发布后，用户安装只需 npm install -g generator-html-boilerplate，然后运行 yo html-boilerplate（去掉 generator- 前缀）

`prompting()` 里用 `this.prompt()` 收集用户输入

Yeoman 内部用的是 Inquirer.js，支持 input、confirm、list、checkbox 等类型。关键点在于：所有异步操作必须 return promise，否则后续生命周期会跳过。

常见错误现象：

用户没输完就直接生成文件 → 忘了 return this.prompt(...)
this.props.xxx 是 undefined → 在 writing() 里直接读取，但没在 prompting() 的 .then() 中赋值给 this.props
默认值取不到 git 用户名 → 应该用 this.user.git.name()，而不是 process.env.USER

示例片段：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

prompting() {
  return this.prompt([
    { type: 'input', name: 'projectName', message: '项目名称？', default: this.appname },
    { type: 'confirm', name: 'useBootstrap', message: '是否引入 Bootstrap？' }
  ]).then(answers => {
    this.props = answers; // 必须显式挂载
  });
}

模板文件放在 `generators/app/templates/`，用 `this.fs.copyTpl()` 渲染

EJS 是 Yeoman 默认模板引擎，语法就是和 ...。注意路径和上下文传参方式：

this.templatePath('index.html') → 读取 templates/index.html
this.destinationPath('index.html') → 输出到用户当前目录根路径
this.fs.copyTpl(src, dest, context) → context 必须是 plain object，不能是 class 实例或函数
如果模板里要条件渲染 CSS 引入，<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css">

容易踩的坑：

模板中用了，但 context 里传的是 { name: 'xxx' } → 变量名不匹配，渲染成空字符串
把 package.json 当纯文本 copy → 应该用 copyTpl，否则无法动态替换 name、version、description
路径写错，比如 this.templatePath('src/main.js')，但实际模板在 templates/src/main.js → Yeoman 不会自动补前缀，报 ENOENT

`install()` 阶段执行 `this.installDependencies()` 要谨慎

这个方法默认调用 npm install，但它不会等你写完 package.json 就执行——因为 install() 在 writing() 之后、end() 之前运行。如果你在 writing() 里生成了 package.json，那没问题；但如果依赖是动态决定的（比如用户选了 TypeScript 就要加 @types/node），就得手动拼 dependencies 对象再写入。

更现实的做法：

把 devDependencies 全写死在模板 package.json 里，靠 copyTpl 渲染基础字段
避免在 install() 里做复杂逻辑，比如判断 Node 版本或自动选择包管理器；Yeoman 不处理这些，交由用户自己 npm install 或 yarn
如果真要跑命令，用 this.spawnCommandSync('npm', ['install', '--no-save'])，但注意 Windows 下可能找不到 npm，建议加 shell: true 参数