如何在 TypeScript 文件更改时监视和重新加载 ts-node

Question

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

我发现我可以运行 .ts 文件 ts-node 但我也想看 .ts文件并重新加载我的 app/server。一个例子是命令 gulp watch.

提前致谢！！

Answer 1

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

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 文件，然后只是运行 nodemon，正如 Sandokan 所建议的：

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

Answer 2

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

上找到它

明显的用例是：

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

Answer 3

这是 HeberLZ 的替代方法，使用 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标志，它只是启用调试协议。

Answer 4

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

就运行ts-node-dev src/index.ts

Answer 5

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

Answer 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"
}

Answer 7

我用

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

和 yarn 开始.. ts-node 不像 'ts-node'

Answer 8

这对我有用：

nodemon src/index.ts

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

Answer 9

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

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

要完成这项工作，您还需要将 ts-node 安装为开发依赖项

yarn add ts-node -D

运行 yarn dev 启动开发服务器

Answer 10

我宁愿不使用 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。

Answer 11

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

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

Answer 12

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

{
  "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"

Answer 13

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

npm install --save-dev nodemon ts-node

第 2 步： 您可以在 package.json

中配置启动脚本

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

现在 nodemon 自动识别项目中的打字稿并自己使用 ts-node 命令。使用 npm start 它将自动 compile/watch 并重新加载。

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

npm link typescript

Answer 14

与nodemon and ts-node:

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

Answer 15

只需更新这 3 个包

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

或

npm install -g nodemon ts-node typescript

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

nodemon <filename>.ts

Answer 16

其他答案的选项总结

nodemon plus ts-node 相当稳定，但需要明确配置，而且速度有点慢
node-dev plus ts-node 比 nodemon 需要更少的配置，但仍然很慢
ts-node-dev is fast but

备选方案 1：nodemon/node-dev + ts-node + swc

ⓘ TL;DR: fastest

另一种将nodemon/node-dev的可靠性与ts-node-dev的速度相结合的替代方案是使用ts-node和swc，一个TypeScript-compatible用 Rust 实现的转译器比 TypeScript 转译器“快一个数量级”。

注意 swc 不做类型检查，这应该是可以接受的，因为大多数编辑器都有类型检查 built-in，并且类型检查应该仍然是构建过程的一部分。

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

nodemon
```
npm install --save-dev nodemon 
```
node-dev
```
npm install --save-dev node-dev 
```

设置 ts-node 与 swc 集成

https://github.com/TypeStrong/ts-node#swc-1
1. 安装必要的包
```
npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime
```
2. 将此添加到 tsconfig.json
```
  "ts-node": {
    "swc": true
  }
```

运行 nodemon 或 node-dev，例如

nodemon --watch src src/index.ts

或：

node-dev src/index.ts

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

ⓘ TL;DR: fast, reliable

这是一个比前一个选项慢的替代方案，因为它使用标准的 TypeScript 转译器，但在我的测试中它仍然比 nodemon/node-dev + ts-node.

快

基本上与前面的选项相同，但没有 swc。通过禁用类型检查，它比 out-of-the-box 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: fast, reliable, fewest dependencies, more finicky

这与之前的备选方案的速度几乎相同。在这三个选项中，这需要最少的依赖项（只需 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.
相比

Answer 17

更改后清除控制台日志

Javascript:

"start": "nodemon -x \"cls && node\" index.js",

打字稿：

"start": "nodemon -x \"cls && ts-node\" index.ts",

如何在 TypeScript 文件更改时监视和重新加载 ts-node

How to watch and reload ts-node when TypeScript files change

typescript

development-environment

nodemon