TypeScript项目如何导入文本模板文件且随tsc编译输出到dist目录

以下提供两种适配轻量命令行工具的实现方案，无需引入重型打包工具：

方案一：最小改动优化现有复制逻辑 #

针对你认为现有硬编码复制路径不规范的问题，可通过跨平台工具 + 配置抽离优化：

• 先安装轻量跨平台复制工具cpx，规避原生cp命令的系统兼容性问题
• 在tsconfig.json中新增自定义模板路径字段，tsc会自动忽略不识别的自定义字段，不影响正常编译：

{
  "compilerOptions": {
    // 保留你原有配置不变
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  // 新增模板路径配置
  "templatePath": "src/templates/**/*"
}

• 修改package.json的构建脚本，直接读取tsconfig中的路径配置：

{
  "build": "yarn clean && yarn jest && tsc && cpx $(node -p \"require('./tsconfig.json').templatePath\") dist/templates"
}

该方案改动极小，完全兼容现有逻辑，比硬编码路径更规范。

方案二：实现你期望的import模板文件用法 #

要支持直接导入模板文件作为字符串使用，仅需两步：

1. 新增类型声明文件src/types/template.d.ts，让TypeScript识别模板文件的导入：

// 适配你的模板后缀，ejs/yml都可按需添加
declare module '*.ejs' {
  const content: string;
  export default content;
}
declare module '*.yml' {
  const content: string;
  export default content;
}

2. 用esbuild替代tsc完成编译（单二进制轻量工具，编译速度是tsc的数十倍，配置量极低）：

• 安装esbuild依赖
• 新建极简构建脚本build.js：

const esbuild = require('esbuild');
esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  platform: 'node',
  outfile: 'dist/index.js',
  // 直接把模板文件作为字符串打包进产物，无需单独复制
  loader: {
    '.ejs': 'text',
    '.yml': 'text'
  }
}).catch(() => process.exit(1))

• 修改package.json的build命令："build": "yarn clean && yarn jest && node build.js"

配置完成后即可直接在代码中按你期望的方式导入模板：import myTemplateFile from "./templates/my-templatefile.ejs"，直接将导入的字符串传入ejs.render即可使用，所有内容打包为单文件产物，分发更方便。

小提示：你示例代码中的ejb.render为笔误，修正为ejs.render即可正常运行。

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