如何使用 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"
}