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

Posted 2023-03-08

【中文标题】自动编译 TypeScript 源代码并复制静态（模板）文件

【英文标题】：Automatically compile TypeScript sources and copy static (template)files

【发布时间】：2019-07-18 22:55:50

【问题描述】：

在调试快速服务器时，我的“构建和运行”过程包括 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 个必需的终端吗？

【问题讨论】：

我可能无法帮助您实现最终目标，但我一直在使用ts-node-dev，它在后台使用ts-node。我相信您可以将您的onSuccess 添加到您的tsconfig.json。当您对 .ts 文件进行更改时，ts-node-dev 将监视并重新启动您的服务器。

【参考方案1】：

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

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

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