TypeScript转译时.hbs Handlebars文件未同步至dist目录的问题求助

问题根源 #

TypeScript编译器（tsc）仅处理.ts/.d.ts这类代码文件，不会自动复制.hbs等静态资源到outDir目录——哪怕你在tsconfig.json的include里添加了.hbs文件，也只是让TS识别这些文件的存在，不会对它们做转译或复制操作。

修复步骤 #

1. 先修正代码语法错误 #

你的代码存在两处语法问题，必须先修正才能正常运行：

• 函数定义语法错误：const newFile = (data: handlebarsData) = { 需改为 const newFile = (data: handlebarsData) => {
• 导出变量名不匹配：export default newClass; 需改为 export default newFile;

同时建议用path模块处理文件路径，避免运行时相对路径混乱，修正后完整代码：

import { handlebarsData } from "./Types/HandlebarsData";
import { readFileSync, writeFileSync } from "fs";
import { join } from "path";
import Handlebars from "handlebars";

const newFile = (data: handlebarsData) => {
  // 用__dirname拼接模板路径，确保运行时能正确找到文件
  const templatePath = join(__dirname, "./template.hbs");
  // 加上utf-8编码，直接返回字符串而非Buffer
  const template = readFileSync(templatePath, "utf-8");
  const compiledTemplate = Handlebars.compile(template);
  const renderedTemplate = compiledTemplate(data);
  writeFileSync(`${data.name}.html`, renderedTemplate);
};
export default newFile;

2. 自动复制.hbs文件到dist目录 #

推荐用跨平台工具copyfiles实现编译后自动复制：

• 安装开发依赖：

npm install copyfiles --save-dev

• 修改package.json的scripts，把编译和复制命令绑定：

{
  "scripts": {
    "build": "tsc && copyfiles -u 1 src/**/*.hbs dist/"
  }
}

参数说明：-u 1 用于移除源路径的第一层目录（比如src/template.hbs会被复制到dist/template.hbs，而非dist/src/template.hbs）

3. （可选）手动复制（适合简单场景） #

如果不想新增依赖，可直接在编译后手动执行复制命令：

• Windows系统：

xcopy src\*.hbs dist\ /Y

• Linux/macOS系统：

cp src/*.hbs dist/

同样可以把该命令加入package.json的build脚本，和tsc用&&连接。

验证 #

执行npm run build后，检查dist目录，确认template.hbs已被复制进去，之后运行dist中的JS文件即可正常读取模板。

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