如何将Handlebars与Apache Cordova结合实现预编译HTML合并？

这需求太贴合Cordova的实际痛点了——原生HTML没法直接用局部模板，而且运行时加载局部文件不仅慢还容易出问题，预编译合并绝对是最优解。我帮朋友搭过类似的流程，下面给你一套可落地的方案：

1. 先搞定依赖和目录结构 #

首先安装Node.js工具包，用来处理模板编译和文件操作：

npm install handlebars fs-extra --save-dev

然后整理你的源码目录，把模板和最终生成的文件分开（别直接碰Cordova的www目录，它会被prepare流程覆盖）：

你的项目根目录
├── src/
│   ├── index.hbs       # 主模板文件
│   └── partials/       # 存放所有局部模板
│       ├── header.hbs
│       ├── footer.hbs
│       └── content.hbs
├── scripts/
│   └── build-templates.js  # 模板编译脚本
├── www/                # Cordova自动管理的目录，最终HTML会生成到这里
└── config.xml

2. 编写Handlebars模板 #

主模板src/index.hbs里用Handlebars的局部模板语法引用子模板，比如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{appTitle}}</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    {{> header}}
    <main>{{> content}}</main>
    {{> footer}}
    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

局部模板比如src/partials/header.hbs就写纯HTML片段：

<header>
    <h1>我的Cordova App</h1>
    <p>版本：{{appVersion}}</p>
</header>

3. 编写模板编译脚本 #

scripts/build-templates.js的作用是加载所有局部模板、编译主模板，然后把最终HTML写入www目录：

const handlebars = require('handlebars');
const fs = require('fs-extra');
const path = require('path');

// 加载所有局部模板
const partialsDir = path.join(__dirname, '../src/partials');
const partialFiles = fs.readdirSync(partialsDir);

partialFiles.forEach(file => {
    const partialName = path.basename(file, '.hbs');
    const partialContent = fs.readFileSync(path.join(partialsDir, file), 'utf8');
    handlebars.registerPartial(partialName, partialContent);
});

// 读取并编译主模板
const mainTemplatePath = path.join(__dirname, '../src/index.hbs');
const mainTemplateContent = fs.readFileSync(mainTemplatePath, 'utf8');
const template = handlebars.compile(mainTemplateContent);

// 可以在这里注入自定义数据，比如从config.xml读版本号
const configXml = fs.readFileSync(path.join(__dirname, '../config.xml'), 'utf8');
const versionMatch = configXml.match(/version="([^"]+)"/);
const appData = {
    appTitle: 'Cordova + Handlebars Demo',
    appVersion: versionMatch ? versionMatch[1] : '1.0.0'
};

// 生成最终HTML并写入www目录
const finalHtml = template(appData);
const outputPath = path.join(__dirname, '../www/index.html');
fs.writeFileSync(outputPath, finalHtml, 'utf8');

console.log('✅ 模板编译完成，已生成www/index.html');

4. 配置Cordova钩子，自动触发编译 #

要让脚本在cordova prepare之后、cordova compile之前自动运行，需要在config.xml里添加钩子配置：

<!-- 对所有平台生效 -->
<hook type="after_prepare" src="scripts/build-templates.js" />

<!-- 或者只针对特定平台 -->
<!-- <platform name="android">
    <hook type="after_prepare" src="scripts/build-templates.js" />
</platform>
<platform name="ios">
    <hook type="after_prepare" src="scripts/build-templates.js" />
</platform> -->

5. 测试流程 #

1. 先手动运行脚本验证：node scripts/build-templates.js，打开www/index.html看看模板是否正确合并、数据是否注入成功。
2. 然后执行cordova prepare，钩子会自动触发脚本，生成最新的HTML。
3. 最后cordova compile或者cordova run，App里加载的就是预合并好的纯HTML了。

额外提示 #

• 如果需要更复杂的模板逻辑（条件判断、循环、自定义助手函数），直接在脚本里注册Handlebars助手函数即可，比如：

  handlebars.registerHelper('ifEquals', function(a, b, options) {
      return a === b ? options.fn(this) : options.inverse(this);
  });
  

• 不要直接修改www目录里的文件，所有源码都放在src目录，由脚本负责生成最终文件，避免被Cordova的prepare流程覆盖。

内容的提问来源于stack exchange，提问作者João Pimentel Ferreira