如何在TypeScript文件更改时观察和重新加载ts节点

Question

我正在尝试使用TypeScript和Angular应用程序运行dev服务器,而不是每次都转换ts文件.我发现我可以运行,ts-node但我也想观看.ts文件并重新加载应用程序/服务器,就像我用gulp watch这样的东西.

Answer 1

我一直在为我的开发环境做同样的事情,直到我注意到nodemon的api允许我们改变它的默认行为才能执行自定义命令.这方面的一个例子如下:

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

或者甚至更好地外化nodemon的配置,因为Sandokan使用以下内容提取到nodemon.json文件,然后运行nodemon:

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

通过这样做,您将能够实时重新加载ts节点进程,而无需担心底层实现.

干杯!

更新了最新版本的nodemon:

创建nodemon.json包含以下内容的文件.

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

Answer 2

其他答案的选项摘要

\n

\n
• nodemon加ts-node相当稳定，但需要显式配置，并且速度有点慢
\n
• node-dev加上ts-node需要的配置比 nodemon 少得多，但仍然很慢
\n
• ts-node-dev速度快但不可靠
\n

\n

请注意（tsx它在底层使用 ESBuild）并且swc不进行类型检查；这应该是可以接受的，因为大多数编辑器都内置了类型检查，并且类型检查仍然应该是构建过程的一部分。您还可以在测试的同时单独进行类型检查，或者通过tsc --noEmit.

\n

（推荐）tsx

\n

\n

\xe2\x93\x98 TL;DR：以最少的配置最快

\n

\n

截至 2023 年 2 月 1 日，tsx似乎是速度和最小配置的最佳组合：

\n

\n

1. 安装 tsx

   \n

   npm install --save-dev tsx\n

   \n
\n

2. 更新你的 package.json，例如

   \n

   npm install --save-dev tsx\n

   \n
\n

3. 运行

   \n

   npm run dev\n

   \n

   （如果只想全局安装tsx并直接运行，请调整这些步骤）

   \n
\n

\n

替代方案 1：nodemon/node-dev + ts-node + SWC

\n

\n

\xe2\x93\x98 TL;DR：与 tsx 一样快，但配置更多

\n

\n

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

\n

\n

1. 安装nodemon或node-dev（无论您喜欢哪个）

   \n
   \n

   • 节点监控器

     \n

     npm install --save-dev nodemon \n

     \n
   \n

   • 节点开发

     \n

     npm install --save-dev node-dev \n

     \n
   \n
   \n
\n

2. 通过 SWC 集成设置 ts-node

   \n

   https://github.com/TypeStrong/ts-node#swc-1

   \n
   \n

   1. 安装必要的包

      \n

      npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime\n

      \n
   \n

   2. 将其添加到 tsconfig.json

      \n

      "scripts: {\n  "dev": "tsx watch src/index.ts",\n

      \n
   \n
   \n
\n

3. 运行nodemon或node-dev，例如

   \n

   nodemon --watch src src/index.ts\n

   \n

   或者：

   \n

   node-dev src/index.ts\n

   \n
\n

\n

替代方案 2：nodemon/node-dev + ts-node transpileOnly

\n

\n

\xe2\x93\x98 TL;DR：快速、可靠

\n

\n

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

\n

基本上它与之前的选项相同，但没有swc. 通过禁用类型检查，它比开箱即用的 ts-node 更快（请参阅上面关于为什么这是可以接受的注释）。

\n

\n

1. 如上安装nodemon/node-dev

   \n
\n

2. 安装 ts-node

   \n

   npm install --save-dev ts-node\n

   \n
\n

3. 修改 tsconfig.json 以启用transpileOnlyts-node

   \n

   npm run dev\n

   \n
\n

4. 如上调用nodemon/node-dev

   \n
\n

\n

替代方案 3：nodemon + tsc --incremental

\n

\n

\xe2\x93\x98 TL;DR：快速、可靠、类型检查、更挑剔

\n

\n

这与之前的替代方案几乎相同的速度。与其他选项相比，它的唯一真正优势是它进行类型检查。

\n

就缺点而言，它可能有点挑剔；在我的测试中，我正在使用dotenv选取.env文件进行本地开发。但取决于你的tsctsconfig.json 中构建的配置方式，您可能需要执行一些操作才能使其正常工作。

\n

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

\n

\n

1. 如上安装nodemon

   \n

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

   \n
\n

2. 配置 tsconfig.json 将 TypeScript 转换为 JavaScript

   \n

   特别是，noEmit不应设置为true

   \n
\n

3. 配置nodemon以运行TypeScript编译器，以便在TypeScript文件发生更改时进行增量转译，例如

   \n

   npm install --save-dev nodemon \n

   \n

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

   \n
\n

\n

Answer 3

我倾倒nodemon并ts-node支持更好的替代方案,ts-node-dev https://github.com/whitecolor/ts-node-dev

赶紧跑 ts-node-dev src/index.ts

Answer 4

这是使用npm脚本替代HeberLZ的答案.

我的package.json:

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

• -e flag设置要查找的扩展名,
• -w 设置观察目录,
• -x 执行脚本.

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

Answer 5

这对我有用：

nodemon src/index.ts

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

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

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

明显的用例是:

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

Answer 8

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

Answer 9

我做了

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

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

Answer 10

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

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

Answer 11

第一步 - 在 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"]
}

第三步 - 在 package.json 文件中使用这些脚本

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

Answer 12

标准方法

从 Node.js 版本开始v16.19.0， CLI API 引入了该 选项，消除了对Nodemon--watch等额外依赖项的需要 。

对于 TypeScript 执行，请使用成熟的包 ts-node。这是配置示例：

// package.json
{
    "scripts": {
        "dev": "node --watch --loader=ts-node/esm ./src/app.ts"
    },
    "devDependencies": {
        "ts-node": "~10.9.0"
    }
}

非标准方法

或者，您可以考虑tsx，尽管它不如 ts-node 那么成熟。

请记住，tsx 目前缺乏对emitDecoratorMetadata许多需要装饰器的项目的关键功能的支持。尽管存在这个缺点，tsx 提供了更快的编译（esbuild 后端）：

// package.json
{
    "scripts": {
        "dev": "tsx watch ./src/app.ts"
    },
    "devDependencies": {
        "tsx": "~4.6.0"
    }
}

Answer 13

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

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

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

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

运行yarn dev以启动开发服务器

Answer 14

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