TypeScript 文件更改时如何查看和重新加载 ts-node答案

【问题标题】：How to watch and reload ts-node when TypeScript files changeTypeScript 文件更改时如何查看和重新加载 ts-node
【发布时间】：2016-10-25 01:43:22
【问题描述】：

我正在尝试使用 TypeScript 和 Angular 应用程序运行开发服务器，而不是每次都转换 ts 文件。

我发现我可以使用ts-node 运行.ts 文件，但我还想观看.ts 文件并重新加载我的应用程序/服务器。这方面的一个例子是命令gulp watch。

提前谢谢你！！

【问题讨论】：

标签： typescript development-environment nodemon

【解决方案1】：

您现在可以简单地npm install --save-dev ts-node nodemon，然后使用.ts 文件运行nodemon，它就会正常工作：

nodemon app.ts

以前的版本：

我一直在为我的开发环境做同样的事情，直到我注意到nodemon 的 API 允许我们更改其默认行为以执行自定义命令。

例如，对于最新版本的nodemon：

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "ts-node src/index.ts"

或者创建一个nodemon.json文件，内容如下：

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"      // or "npx ts-node src/index.ts"
}

然后不带参数运行nodemon。

通过这样做，您将能够实时重新加载ts-node 进程，而不必担心底层实现。

干杯！

还有更旧版本的nodemon：

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts

或者甚至更好：将 nodemon 的配置外部化为具有以下内容的 nodemon.json 文件，然后按照 Sandokan 的建议运行 nodemon：

{
  "watch": ["src/**/*.ts"],
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./index.ts"
}

【讨论】：

如果 index.ts 是一个 express 实例，我该如何杀死它并重新启动
您也可以创建一个 nodemon.json 文件，其中包含所有提到的选项，如下所示：{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "exec": "ts-node ./app-server.ts" } 并输入 nodemon
我错误地在文件夹名称前添加了./，结果它坏了。这对我有用：{ "verbose": true, "watch": ["server/**/*.ts"], "ext": "ts js json", "ignore": ["server/**/*.spec.ts"], "exec": "ts-node index.ts" }。和命令行：nodemon --watch server/**/*.ts --ignore server/**/*.spec.ts --verbose --exec ts-node index.ts
我想提一下，你还必须在配置文件中设置ext，所以它的外观会发生变化。我的配置文件如下所示：{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "ext": "ts js json", "_exec": "node dist/startup.js", "exec": "ts-node src/startup.ts" }
在 Windows 机器上，不要在 package.json 中使用单引号。用\" 替换那些使脚本运行良好："nodemon --watch \"./src/**/*.ts\" -r dotenv/config --exec \"ts-node\" src/index.ts"

【解决方案2】：

我放弃了 nodemon 和 ts-node 以支持更好的选择，ts-node-dev https://github.com/whitecolor/ts-node-dev

只需运行ts-node-dev src/index.ts

【讨论】：

为什么这样更好？
速度更快，自动检测需要观看的文件，无需配置。
这是 ts-node 的最佳（如果不是唯一）选项，尤其是对于大型项目。它不会从头开始重新编译所有文件，而是进行增量编译，例如 tsc --watch。
在我的例子中，这实际上比 nodemon 和 ts-node 快 10 倍。谢谢！
所以我真的只有"start": "ts-node-dev src"。不需要 babel、nodemon 或它附带的任何配置。一切都为您处理。

【解决方案3】：

这是 HeberLZ 的 answer 的替代方案，使用 npm 脚本。

我的package.json：

  "scripts": {
    "watch": "nodemon -e ts -w ./src -x npm run watch:serve",
    "watch:serve": "ts-node --inspect src/index.ts"
  },

-e 标志设置要查找的扩展，
-w 设置监视目录，
-x 执行脚本。

watch:serve 脚本中的--inspect 实际上是一个node.js 标志，它只是启用调试协议。

【讨论】：

还要确保在本地为项目安装了打字稿。否则你可能得到的错误不是很清楚。
由于this，我认为现在应该是ts-node --inspect -- src/index.ts。
这种方法似乎产生了相当多的多余输出。
-e ts -w ./src 帮了我大忙 - 这适用于 loopback4 CLI 生成的项目

【解决方案4】：

这对我有用：

nodemon src/index.ts

显然感谢这个拉取请求：https://github.com/remy/nodemon/pull/1552

【讨论】：

这也适用于我，但如何？好像有点魔幻什么在编译打字稿？我没有安装ts-node。
@d512 你确定它不在你的node_modules/ 中吗？对我来说，如果我没有它，它就会失败。
这确实需要安装ts-node。在没有ts-node 的情况下运行此命令将导致failed to start process, "ts-node" exec not found 错误。您可能将其作为 node_modules 中的剩余工件。话虽这么说，这个解决方案要好得多，因为它不需要额外的配置。
全局安装ts-node：npm install -g ts-node

【解决方案5】：

专门针对这个问题，我创建了tsc-watch 库。你可以在npm找到它。

明显的用例是：

tsc-watch server.ts --outDir ./dist --onSuccess "node ./dist/server.js"

【讨论】：

这在 express 或 koa 服务器的情况下如何工作，因为它实际上并没有杀死以前的节点实例？
'tsc-watch' 会为您终止并重新启动进程。
这正是我想要的。不确定 ts-node-dev 的目的是什么，但我无法让它报告打字稿错误。在花了几个小时试图让它工作之后，我尝试了 tsc-watch，它就像一个魅力！
@gilamran 在您的包裹文档中有一个错字："[...] similar to nodemon but for TypeCcript.":)

【解决方案6】：

你可以使用ts-node-dev

当任何所需文件发生更改时（作为标准 node-dev），它会重新启动目标节点进程，但在重新启动之间共享 Typescript 编译过程。

安装

yarn add ts-node-dev --dev

你的 package.json 可能是这样的

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "tsc": "tsc",
  "dev": "ts-node-dev --respawn --transpileOnly ./src/index.ts",
  "prod": "tsc && node ./build/index.js"
}

【讨论】：

谢谢！这是我发现启用节点服务器自动重新加载的最简单方法。

【解决方案7】：

将"watch": "nodemon --exec ts-node -- ./src/index.ts" 添加到package.json 的scripts 部分。

【讨论】：

【解决方案8】：

我做了

"start": "nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec ts-node src/index.ts"

和纱线开始.. ts-node 不像 'ts-node'

【讨论】：

【解决方案9】：

我宁愿不使用 ts-node 并始终从 dist 文件夹运行。

为此，只需使用默认配置设置您的 package.json：

....
"main": "dist/server.js",
  "scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node .",
    "dev": "nodemon"
  },
....

然后添加 nodemon.json 配置文件：

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "npm restart"
}

这里，我使用 "exec": "npm restart"
所以所有的 ts 文件都会重新编译成 js 文件，然后重启服务器。

要在开发环境中运行，

npm run dev

使用此设置，我将始终从分布式文件运行，不需要 ts-node。

【讨论】：

【解决方案10】：

将此添加到您的 package.json 文件中

scripts {
"dev": "nodemon --watch '**/*.ts' --exec 'ts-node' index.ts"
}

为了完成这项工作，您还需要将 ts-node 安装为 dev-dependency

yarn add ts-node -D

运行yarn dev 启动开发服务器

【讨论】：

【解决方案11】：

另一种方法是先在监视模式下使用tsc -w 编译代码，然后在javascript 上使用nodemon。这种方式速度和 ts-node-dev 差不多，优点是更像生产。

 "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js"
  },

【讨论】：

或者只是"dev": "( tsc -w & ) && nodemon dist/index.js"。
这对我来说是一个很好的答案。简单易行，谢谢。

【解决方案12】：

第 1 步：您可以简单地安装 nodemon 和 ts-node （如果您已经完成，请跳过）

npm install --save-dev nodemon ts-node

STEP 2：可以在package.json中配置启动脚本

"start": "nodemon ./src/app.ts"

现在nodemon现在自动从项目中识别打字稿并自行使用ts-node命令。使用npm start，它会自动编译/监视并重新加载。

如果您遇到任何错误，例如项目中找不到 typescript 模块。只需在项目文件夹中使用此命令即可。

npm link typescript

【讨论】：

【解决方案13】：

其他答案的选项摘要

nodemon 加上 ts-node 相当稳定，但需要显式配置，速度有点慢
node-dev 加上 ts-node 所需的配置比 nodemon 少得多，但仍然很慢
ts-node-dev 很快，但 unreliable

方案一：nodemon/node-dev + ts-node + swc

ⓘ TL;DR：最快，实验性

将 nodemon/node-dev 的可靠性与 ts-node-dev 的速度相结合的另一种选择是将 ts-node 与 swc 一起使用，这是一个在 Rust 中实现的与 TypeScript 兼容的转译器，它是“顺序比 TypeScript 转译器快的数量级：

安装 nodemon 或 node-dev（随你喜欢）

nodemon
```
npm install --save-dev nodemon 
```
节点开发
```
npm install --save-dev node-dev 
```

使用 swc 集成设置 ts-node

https://github.com/TypeStrong/ts-node#bundled-swc-integration
1. 安装必要的包
```
npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime
```
2. 将此添加到 tsconfig.json
```
  "ts-node": {
    "transpileOnly": true,
    "transpiler": "ts-node/transpilers/swc-experimental"
  }
```
  （注意 "transpileOnly": true, 禁用类型检查）

运行 nodemon 或 node-dev，例如

nodemon --watch src src/index.ts

或：

node-dev src/index.ts

备选方案 2：nodemon/node-dev + ts-node transpileOnly

>

ⓘ TL;DR：快速、可靠

由于 ts-node + swc 是“实验性的”，这里有一个比上一个选项慢的替代方案，但不依赖任何实验性功能，在我的测试中它仍然比 nodemon/node-dev + ts- 快节点。

基本上它与前一个选项相同，但没有swc。通过禁用类型检查，它比开箱即用的 ts-node 更快；如果您的编辑器内置了类型检查，并且/或者您仍然在构建过程中进行类型检查，这可能是可以接受的。

如上安装nodemon/node-dev
安装 ts-node
```
npm install --save-dev ts-node
```
修改你的 tsconfig.json 为 ts-node 启用 transpileOnly
```
  "ts-node": {
    "transpileOnly": true
  }
```
如上调用nodemon/node-dev

备选方案 3：nodemon + tsc --incremental

ⓘ TL;DR：快速、可靠、更少依赖、更挑剔

这与前一个替代方案的速度几乎相同。在这三个选项中，这需要最少的依赖项（只需 nodemon，加上 TypeScript 编译器，如果您使用的是 TypeScript，您已经安装了该编译器）。

（这可能也适用于 node-dev，但我没有看到 node-dev 的 exec 选项）

就缺点而言，它可能有点挑剔；在我的测试中，我使用dotenv 来获取我的.env 文件以进行本地开发。但是根据您的 tsc 构建在 tsconfig.json 中的配置方式，您可能需要做一些杂技才能使其正常工作。

但是有选择是好的，所以这里是：

如上安装nodemon
配置 tsconfig.json 以将您的 TypeScript 转换为 JavaScript

特别是，noEmit 不应设置为 true
配置 nodemon 以运行 TypeScript 编译器以在任何时候更改 TypeScript 文件时执行incremental transpilation，例如
```
"dev": "nodemon -e ts --watch src .env --exec \"tsc --incremental && node src/index.js\"",
```
您甚至可以删除 --incremental 以进一步简化它，但它最终会慢得多，与 nodemon/node-dev + ts-node 相当。

【讨论】：

【解决方案14】：

如果您在package.json（在https://github.com/TypeStrong/ts-node/issues/1007 中描述）中使用"type": "module" 时遇到问题，请使用以下配置：

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "node --loader ts-node/esm --experimental-specifier-resolution ./src/index.ts"
}

或在命令行中

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "node --loader ts-node/esm --experimental-specifier-resolution src/index.ts"

【讨论】：

【解决方案15】：

只需更新这 3 个包

nodemon, ts-node, typescript
yarn global add nodemon ts-node typescript

或

npm install -g nodemon ts-node typescript

现在你可以运行这个了，问题解决了

nodemon <filename>.ts

【讨论】：

请在您的代码之外添加您的 cmets 或说明。这样会更容易理解和可读。

【解决方案16】：

使用nodemon 和ts-node：

nodemon --watch source --ext ts,json --exec "node --loader ts-node/esm ./source/index.ts"

【讨论】：