当TypeScript文件改变时，如何观察和重新加载ts-node

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

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

提前谢谢你!!

329906 次浏览
小开
最佳答案

你现在可以简单地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文件中，然后只运行nodemon，就像Sandokan建议的那样:

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

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

显而易见的用例是:

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

小开

这里有一个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标志，它只是启用调试协议。

小开

我已经抛弃了nodemon和ts-node，以支持一个更好的替代品，ts-node-dev https://github.com/whitecolor/ts-node-dev < / p >

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

小开

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

小开

你可以使用ts-node-dev

当任何必需的文件发生变化时，它重新启动目标节点进程(作为标准的node-dev)，但在重新启动之间共享Typescript编译过程。

安装

yarn add ts-node-dev --dev

还有你的包裹。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"
}
小开

我做过

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

纱线开始。ts节点不像' Ts-node '

小开

这对我来说很管用:

nodemon src/index.ts

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

小开

把这个加到你的包里。json文件

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

要做到这一点，你还需要安装ts-node作为dev-dependency

yarn add ts-node -D

运行yarn dev启动开发服务器

小开

我倾向于不使用ts-node，总是从dist文件夹运行 要做到这一点，只需设置您的包。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"
}

这里，我使用" execute ": "npm restart"
所以所有ts文件将重新编译为js文件，然后重新启动服务器

要在开发环境中运行，

npm run dev

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

小开

另一种方法是先在监视模式下使用tsc -w编译代码，然后在javascript上使用nodemon。这种方法在速度上与ts-node-dev相似，并且具有更类似于生产的优点。

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

如果在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"
小开

你可以简单地安装nodemon和ts-node (如果你已经完成了，请跳过)

npm install --save-dev nodemon ts-node

步骤2:你可以在package.json中配置开始脚本

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

现在nodemon自动从项目中识别typescript，并自己使用ts-node命令。使用npm start，它将自动编译/监视和重载。

如果你得到任何错误，如typescript模块没有在项目中找到。在项目文件夹中简单使用此命令。

npm link typescript
小开

使用nodemon和ts-node:

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

只需更新这3个包

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

或

npm install -g nodemon ts-node typescript

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

nodemon <filename>.ts
小开

从其他答案中总结选项

方案1:nodemon/node-dev + ts-node + swc

TL;DR:最快

将nodemon/node-dev的可靠性与ts-node-dev的速度相结合的另一种选择是使用ts-node和swc， swc是Rust中实现的typescript兼容的转译器，它“快”一个数量级。而不是TypeScript编译器。

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

  1. 安装nodemon或node-dev(随你喜欢)

    • < p > nodemon

      npm install --save-dev nodemon
    • < p > node-dev

      npm install --save-dev node-dev

  2. 设置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
}

  3. 执行nodemon或node-dev命令

    nodemon --watch src src/index.ts

    或者:

    node-dev src/index.ts

方案2:nodemon/node-dev + ts-node transpileOnly

TL;DR:快速、可靠

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

基本上它与前一个选项相同，但没有swc。通过禁用类型检查，它比开箱即用的ts-node更快(关于为什么这应该是可接受的，请参阅上面的说明)。

  1. 如上所述安装nodemon/node-dev

  2. < p >安装ts-node

    npm install --save-dev ts-node

  3. 修改tsconfig。为ts-node启用transpileOnly

      "ts-node": {
"transpileOnly": true
}

  4. 调用nodemon/node-dev

方案3:nodemon + tsc—增量

TL;DR:快速，可靠，依赖最少，更挑剔

这几乎与前一种选择的速度相同。在这三个选项中，这需要最少的依赖关系(只需要没有恶魔，加上TypeScript编译器，如果你使用TypeScript，你已经安装了它)。

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

在缺点方面，它可能会更挑剔;在我的测试中，我使用dotenv来获取我的.env文件进行本地开发。但这取决于你的tsc构建在tsconfig中的配置方式。Json，你可能需要做一些杂耍才能让它工作。

但有选择是件好事，所以就是这样:

  1. 安装nodemon如上

  2. < p >配置tsconfig。将TypeScript编译成JavaScript

    特别地，noEmit不应该被设置为true

  3. 配置nodemon在TypeScript文件被更改时运行TypeScript编译器执行增量transpilation。

    "dev": "nodemon -e ts --watch src .env --exec \"tsc --incremental && node src/index.js\"",

    你甚至可以删除--incremental来进一步简化它，但它最终会慢得多，相当于nodemon/node-dev + ts-node。

小开

修改后清除控制台日志

Javascript:

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

打字稿:

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

第一步-在deDependencies中安装以下包

npm i -D @types/express @types/node nodemon ts-node tsc typescript

或者使用纱线

yarn add -D @types/express @types/node nodemon ts-node tsc typescript

第二步—在您的tsconfig中使用此配置。json文件

{
"compilerOptions": {
"target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"lib": [
"DOM",
"ES2017"
] /* Specify library files to be included in the compilation. */,
"sourceMap": true /* Generates corresponding '.map' file. */,
"outDir": "./dist" /* Redirect output structure to the directory. */,
"rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,


"strict": true /* Enable all strict type-checking options. */,
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"exclude": ["node_modules"],
"include": ["./src"]
}

第三步——在包中使用这些脚本。json文件

"scripts": {
"start": "node ./dist/server.js",
"dev": "nodemon -L ./src/server.ts && tsc -w"
},

提交答案