自动编译 TypeScript 源代码并复制静态（模板）文件

Question

在调试快速服务器时，我的“构建和运行”过程包括 3 个步骤：

• 使用 tsc 编译 TypeScript 源代码
• 将图片、模板等静态文件复制到dist/
• 运行编译好的server.js文件

这些步骤中的每一个都可以使用观看模式自动完成，但我正在努力将这三个步骤结合在一起。 我设法通过使用tsc-watch 来查看TypeScript 源，cpx 复制静态文件，最后nodemon 重新启动服务器来让它工作。 这种方法有效，但有几个问题：

• cpx 只监视开始时存在的文件（我认为 tsc-watch 也会这样做有时，这有点奇怪）
• 这种方法需要在 3 个单独的终端中使用 3 个命令，这很不方便
• cpx 和tsc-watch 都没有正确处理Ctrl+C 退出，导致各种问题

我 found some other questions 与这个主题相关，但他们都没有解决上述问题（尽管他们确实告诉我有关 cpx 和 tsc-watch 的信息）。 我不想使用concurrently，因为它会导致时间问题，并且它会混合来自不同进程的控制台输出（最值得注意的是tsc-watch 和实际服务器）。

使用tsc-watch'es --onSuccess 复制静态文件是不够的，因为模板文件中的更改不会被拾取。这可以通过更改源文件中的注释来解决，但这会触发完全重新编译（重新启动服务器）。 使用webpack's watch mode 也是不够的，因为它不会接收新文件并且会进一步污染控制台输出。

有没有我可能错过的解决方案？我应该只编写一个脚本来自动打开 3 个必需的终端吗？

Answer 1

我最终选择了webpack 和copy-webpack-plugin。

虽然在撰写本文时不幸的是手表模式是broken，但它似乎完全符合我的需求几乎：

• 这种方法只需要 2 个终端（一个用于 webpack，另一个用于 nodemon）。它并不完美，但比 3 好很多。
• 新文件应该被自动拾取（尽管目前不能 100% 正确工作）
• 静态文件中的更改不应导致完全重新编译，从而导致服务器重新启动（同样，这目前不能 100% 正确工作）
• Webpack 处理 Ctrl+C 优雅退出
• 对我来说最重要的原因是：copy-webpack-plugin 允许我使用 context 选项更详细地指定我希望如何复制我的文件