通过模板引擎批量生成.html文件的技术方案咨询

你的初始思路完全可行，模板引擎天生就是为这类「固定结构+变量替换」的批量生成场景设计的，基于Node CLI可以非常轻量地实现整套流程，以下是具体实现方案和优化建议：

方案1：基于模板引擎自定义实现（最灵活，推荐） #

只需要3个核心文件，几十行代码即可完成：

• 第一步：准备HTML模板文件template.html，把需要替换的链接、脚本地址用{{变量名}}占位，示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{{pageTitle}}</title>
  <link rel="stylesheet" href="{{customCssUrl}}">
</head>
<body>
  <script src="{{customScriptUrl}}"></script>
</body>
</html>

• 第二步：准备变量配置文件config.json，把30份HTML对应的变量整理为数组：

[
  {
    "outputFileName": "page-1.html",
    "pageTitle": "页面1",
    "customCssUrl": "https://cdn.example.com/css/page1.css",
    "customScriptUrl": "https://cdn.example.com/js/page1.js"
  },
  // 剩余29份页面的变量配置以此类推
]

• 第三步：安装依赖并编写生成脚本
  首先执行安装命令：npm i handlebars
  然后新建generate.js脚本：

const fs = require('fs/promises')
const path = require('path')
const Handlebars = require('handlebars')
const pageConfigList = require('./config.json')
// 输出目录可自定义
const OUTPUT_DIR = path.join(__dirname, 'dist')

async function run() {
  // 提前创建输出目录
  await fs.mkdir(OUTPUT_DIR, { recursive: true })
  // 读取并编译模板
  const templateRaw = await fs.readFile(path.join(__dirname, 'template.html'), 'utf-8')
  const render = Handlebars.compile(templateRaw)
  // 批量生成文件
  for (const config of pageConfigList) {
    const htmlContent = render(config)
    await fs.writeFile(path.join(OUTPUT_DIR, config.outputFileName), htmlContent, 'utf-8')
  }
  console.log('所有HTML文件生成完毕，输出路径：', OUTPUT_DIR)
}

run().catch(err => console.error('生成失败：', err))

• 第四步：CLI调用执行，直接运行node generate.js即可生成全部文件，也可以在package.json的scripts字段中添加"gen:html": "node generate.js"，之后直接执行npm run gen:html即可。

方案2：无代码CLI工具实现（适合不想写脚本的场景） #

如果不需要自定义扩展逻辑，也可以直接用Node生态下的静态站点生成CLI工具，配置模板和数据源后即可直接生成，不需要自行编写文件读写逻辑。

优化建议 #

• 如果变量不需要持久化存储，也可以直接在generate.js中动态生成配置数组，不需要单独维护config.json
• 如果需要支持CLI传参（比如自定义输出目录、指定配置文件路径），可以引入commander库做参数解析，实现类似node generate.js --output ./custom-dist --config ./prod.json的调用方式
• 如果需要压缩输出的HTML，可以引入html-minifier库，在写入文件前对生成的HTML内容做压缩处理

内容的提问来源于stack exchange，提问作者Plastic