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

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


你现在可以简单地用npm install——save-dev ts-node nodemon,然后用.ts文件运行nodemon,它就可以工作了:

nodemon app.ts

以前的版本:

我在开发环境中也遇到了同样的问题,直到我注意到没有一个demon的API允许我们为了执行自定义命令而改变它的默认行为。

例如,对于nodemon的最新版本:

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

或者创造一个无恶魔。Json文件,内容如下:

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

然后无参数地运行。

通过这样做,您将能够实时重新加载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服务器。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

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

(编辑) 自从我写了这个答案,nodemon已经改进了很多,现在所需的配置更轻了,性能也更好了。我目前使用这两种方法(显然是在不同的项目中),并且都很满意。


添加"watch": "nodemon——exec ts-node——./src/index. "到你的package.json的脚本部分。


你可以使用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

显然,由于这个拉请求: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启动dev服务器


我宁愿不使用ts-node,总是从dist文件夹运行。 要做到这一点,只需设置您的包。Json默认配置:

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

然后不加恶魔。Json配置文件:

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

这里,我使用"exec": "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中使用"type": "module"时有问题。json(描述在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"

步骤1:你可以简单地安装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

or

npm install -g nodemon ts-node typescript

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

nodemon <filename>.ts

从其他答案中总结选项

Nodemon + ts-node非常稳定,但需要显式配置,并且有点慢 Node-dev + ts-node需要的配置比nodemon少得多,但仍然很慢 Ts-node-dev速度很快,但不可靠

注意tsx(在底层使用ESBuild)和swc不做类型检查;这应该是可以接受的,因为大多数编辑器都内置了类型检查,并且类型检查仍然应该是构建过程的一部分。您还可以在测试的同时单独执行类型检查,或者通过tsc——noEmit作为预推送钩子。

(推荐)tsx

TL;DR:最小配置的最快速度

截至2023-02-01,tsx似乎是速度和最小配置的最佳组合:

安装tsx NPM install——save-dev TSX 更新您的包。json。 “脚本:{ "dev": "tsx watch src/index.ts", 运行它 运行开发 (如果您只想全局安装tsx并直接运行,请调整这些步骤)

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

TL;DR:与tsx一样快,但具有更多配置

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

安装nodemon或node-dev(你喜欢哪个) nodemon NPM install——save-dev nodemon node-dev NPM install——save-dev node-dev 使用swc集成设置ts-node https://github.com/TypeStrong/ts-node#swc-1 安装必要的软件包 NPM install——save-dev ts-node @swc/core @swc/helpers regenerator-runtime 将此添加到tsconfig.json " ts-node ": { “swc”:真的 } 运行nodemon或node-dev,例如 Nodemon——查看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更快(关于为什么这应该是可接受的,请参阅上面的说明)。

如上所述安装nodemon/node-dev 安装ts-node NPM install——save-dev ts-node 修改您的tsconfig。为ts-node启用transpileOnly " ts-node ": { “transpileOnly”:真的 } 如上所述调用nodemon/node-dev

方案3:nodemon + tsc—增量

TL;DR:快速,可靠,类型检查,更挑剔

这几乎与前一种选择的速度相同。与其他选项相比,这个选项的唯一真正优势是它可以进行类型检查。

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

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

Install nodemon as above (It's possible that this may work with node-dev as well, but I didn't see an exec option for node-dev) Configure tsconfig.json to transpile your TypeScript to JavaScript In particular, noEmit should not be set to true Configure nodemon to run the TypeScript compiler to do an incremental transpilation any time a TypeScript file is changed, e.g. "dev": "nodemon -e ts --watch src .env --exec \"tsc --incremental && node src/index.js\"", You can even remove --incremental to further simplify it, but it will end up being much slower, comparable to 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"
},