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

Question

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

npm start

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

node filename

查看输出。

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

node filename

命令

Answer 1

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

这是一个想法：

• 使用tsconfig.json文件配置tsconfig.json
• 运行tsc --watch ，所以每次更改.ts文件时， tsc都会编译它并生成输出（假设你配置了./dist将输出放在./dist文件夹中）
• 使用nodemon监视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

Answer 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来启动整个事情。

Answer 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配置文件tsconfig.json

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

好的，这里发生了什么

首先，我们应该创建tsconfig.json并告诉tsconfig.json将编译后的文件放入./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

Answer 4

编译打字稿

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

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

Answer 5

 "scripts": {
    "build": "tsc -b"
}