如何使用 npm 命令编译打字稿？

Posted 2023-03-06

【中文标题】如何使用 npm 命令编译打字稿？

【英文标题】：How to compile typescript using npm command?

【发布时间】：2017-06-10 17:47:40

【问题描述】：

我只是想知道是否有任何命令可以直接编译打字稿代码并获得输出。现在，我正在做的是，每次我对文件进行更改时，我都必须重新运行命令才能编译它

npm start

这会启动浏览器，然后我必须使用 Ctrl+C 停止执行，然后我必须使用 npm 命令运行文件

node filename

查看输出。

所以我想知道的是，是否有任何 npm 命令可以编译 .ts 文件并查看我在使用文件运行文件时对文件所做的更改

node filename

命令

【问题讨论】：

您应该阅读有关任务运行器的信息，或者只需将tsc app.ts 添加到npm start of package.json

【参考方案1】：

您可以使用--watch 参数启动tsc 命令（打字稿编译器）。

这是一个想法：

使用tsconfig.json 文件配置打字稿 运行tsc --watch，因此每次更改.ts 文件时，tsc 都会对其进行编译并生成输出（假设您配置了打字稿以将输出放在./dist 文件夹中） 使用nodemon 观察./dist 中的文件是否已更改以及是否需要重新启动服务器。

这里有一些脚本（放入package.json）可以帮助你做到这一点（你需要安装以下模块npm install --save typescript nodemon npm-run-all rimraf）

"scripts": 
    "clean": "rimraf dist",
    "start": "npm-run-all clean --parallel watch:build watch:server --print-label",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'"

那么你只需要在终端中运行npm start

【讨论】：

这对我不起作用，因为nodemon 试图在watch:build 任务完成之前启动服务器。我从 nodemon 收到错误消息：Cannot find module '.../dist/index.js

您可能需要在packages.json中添加nodemon、npm-run-all和rimraf npm i rimraf npm-run-all nodemon --save-dev

tsc 是打字稿编译器。当您使用 npm install typescript 安装 typescript 时，它就会出现。您也可以将它与npx tsc 一起使用。您可以找到更多信息here

【参考方案2】：

这是基于@ThomasThiebaud 提出的解决方案。在 nodemon 尝试启动服务器之前，我必须对其进行一些修改以确保文件是在 dist/ 中构建的。

"scripts": 
    "clean": "rimraf dist",
    "build": "tsc",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'",
    "start": "npm-run-all clean build --parallel watch:build watch:server --print-label"
  ,

您仍然需要运行 npm start 来启动整个过程。

【参考方案3】：

这是我的方法，假设您将所有typescript 文件保存在src 文件夹中，并希望在./dist 文件夹中生成输出的javascript 文件。

    "name": "yourProjectName",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/index",
    "types": "./dist/index",
    "scripts": 
        "dev": "tsc --watch & nodemon dist"
    ,
    "author": "Gh111",
    "license": "ISC",
    "devDependencies": 
        "yourdevDependencies": "^1.0.0"
    

和打字稿配置文件tsconfig.json

  "compilerOptions": 
    "target": "es5",       
    "module": "commonjs",  
    "outDir": "./dist",    
  ,
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules"
  ]

好的，这是怎么回事

首先我们应该创建 tsconfig.json 并告诉 typescript 将编译后的文件放入 ./dist 文件夹，同时我们应该排除 node_module 文件夹或我们想要的任何内容，并包含 ["./src/**/*"] 目录中的所有内容。

之后在packages.json文件中我们应该指定我们编译的index.js文件的路径

"main": "./dist/index"

最后我们告诉tsc 到--watch 任何typescript 的变化，并告诉nodemon 在./dist 目录内观察，如果有变化nodemon 将重新启动服务器。

"scripts": 
    "dev": "tsc --watch & nodemon dist"
 ,

运行脚本类型npm run dev

【参考方案4】：

编译 TypeScript

tsc 文件名.ts |节点文件名.js（适用于 windows 用户）。

tsc filename.ts && node filename.js（适用于 Mac 用户）。