TypeScript+Node.js+ts-node环境下如何导入.hbs文件为字符串

API 探路者

2026-10-2

问题根源

你配置的.d.ts仅解决了TypeScript类型校验阶段的报错，没有修改运行时的模块加载逻辑，Node.js默认会将未知后缀的导入文件作为JavaScript模块解析执行，因此会触发模板内部import语句的语法错误。

可选解决方案

方案1：运行时注册自定义模块处理器（适合你当前的CommonJS环境，实现成本最低）

操作步骤：

保留你已经写好的.d.ts类型声明，确保类型校验正常
在项目入口文件index.ts最顶部添加.hbs后缀的加载逻辑，优先级高于所有.hbs导入语句：

import * as fs from 'fs';
declare interface NodeRequire {
  extensions: Record<string, (module: NodeModule, filename: string) => void>;
}

require.extensions['.hbs'] = function (module: NodeModule, filename: string) {
  const fileContent = fs.readFileSync(filename, 'utf-8');
  module.exports = fileContent;
};

// 后面再写你原来的导入逻辑
import test from "./templates/test.hbs";
console.log(test);

不需要额外安装依赖，完全符合导入语法要求，同时保留.hbs文件独立的语法高亮、格式化能力。

方案2：编译阶段替换为字符串常量（完全无运行时IO，符合编译阶段导入的要求）

如果你需要在编译阶段就把模板内容嵌入编译产物，不需要运行时读取文件，可以用自定义转换器实现，和前端raw-loader效果完全一致：

安装依赖：

npm install ttypescript typescript-plugin-text --save-dev

修改tsconfig.json，新增插件配置、指定ts-node的编译器为ttypescript：

{
  "compilerOptions": {
    // 原有其他配置保持不变
    "plugins": [
      {
        "transform": "typescript-plugin-text",
        "extensions": [".hbs"]
      }
    ]
  },
  "ts-node": {
    "files": true,
    "compiler": "ttypescript"
  }
}