TypeScript编译时如何将Handlebar(.hbs)文件导出至dist目录

嘿，这个问题我碰到过好几次了——TypeScript编译器只会处理.ts/.tsx这类源码文件，像.hbs这种模板文件确实不会自动复制到dist目录，导致运行时找不到模板路径。给你几个实用的解决方案，看你项目的工具链情况选就行：

1. 简单脚本配合tsc（适合小型项目） #

如果你的项目不需要复杂的构建流程，直接在编译命令后加一个复制文件的脚本就行。在package.json的scripts里配置：

针对Mac/Linux： #

"scripts": {
  "build": "tsc && cp -r src/views dist/"
}

针对Windows： #

"scripts": {
  "build": "tsc && xcopy src\\views dist\\views /E /I"
}

/E表示复制所有子目录，/I表示如果目标目录不存在就创建它。要是想跨平台兼容，也可以用cross-env配合通用的复制工具，不过下面的方法更省心。

2. 使用copyfiles包（跨平台友好） #

copyfiles是专门用来复制文件的npm包，跨平台支持很好，不用写两套脚本。

首先安装依赖：

npm install copyfiles --save-dev

然后在package.json里配置编译命令：

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

这里的-u 1是指去掉源路径的第一层（也就是src/），这样复制后dist目录下就会直接生成views文件夹，和你的源码结构对应，保证路径引用正确。

3. Webpack项目用copy-webpack-plugin #

如果你的项目已经用Webpack打包，那直接用copy-webpack-plugin就能在打包时自动同步模板文件。

先安装插件：

npm install copy-webpack-plugin --save-dev

然后在webpack.config.js里添加配置：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/views', to: 'views' },
      ],
    }),
  ],
};

这样Webpack在编译时会自动把src/views目录完整复制到你指定的输出目录（一般就是dist）里。

4. 开发环境实时同步 #

如果是开发阶段需要修改.hbs文件后实时生效，不用每次手动编译复制，可以配合nodemon或者ts-node-dev：

用nodemon的话，新建nodemon.json： #

{
  "watch": ["src"],
  "ext": "ts,hbs",
  "exec": "ts-node src/server/myServer.ts",
  "ignore": ["node_modules"],
  "events": {
    "restart": "cp -r src/views dist/"
  }
}

这样每次修改.ts或.hbs文件时，nodemon会重启服务并同步视图文件。

用copyfiles的监听模式： #

单独开一个终端运行：

copyfiles -u 1 src/views/**/*.hbs dist/ -w

-w表示监听文件变化，一旦有.hbs文件修改就自动复制。

选个最适合你项目的方法就行，我个人小项目常用copyfiles，Webpack项目就用对应的插件，都挺省心的。

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