node.js 如何使用 npm 命令编译打字稿?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41853422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-02 17:56:57  来源:igfitidea点击:

How to compile typescript using npm command?

node.jstypescriptnpm

提问by Lijin Durairaj

Well I just wanted to know is there any command which will directly compile the typescript code and get the output. Right now, what i am doing is,every time when i make changes in the file i have to re run the command inorder to compile it

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

npm start

This starts the browser and then i have to stop the execution using ctrl + c and then i have to run the file using the npm command

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

node filename

to see the output.

查看输出。

So what i want to know is, is there any npm command which will compile the .ts file and see the changes which i have made in the file while i run the file using the

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

node filename

command

命令

回答by ThomasThiebaud

You can launch the tsccommand (typescript compiler) with --watchargument.

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

Here is an idea :

这是一个想法:

  • Configure typescript using tsconfig.jsonfile
  • Run tsc --watch, so every time you change a .tsfile, tscwill compile it and produce the output (let say you configured typescript to put the output in ./distfolder)
  • Use nodemonto watch if files in ./disthave changed and if needed to relaunch the server.
  • 使用tsconfig.json文件配置打字稿
  • 运行tsc --watch,所以每次更改.ts文件时,tsc都会编译它并生成输出(假设您配置了打字稿以将输出放在./dist文件夹中)
  • 使用nodemon看,如果在文件中./dist已经改变,如果需要的话重新发起服务器。

Here are some scripts (to put in package.json) that can help you to do it (you will need to install the following modules npm install --save typescript nodemon npm-run-all rimraf)

这里有一些脚本(要放入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'"
}

Then you just need to run npm startin a terminal

然后你只需要npm start在终端中运行

回答by demisx

This is based on solution proposed by @ThomasThiebaud. I had to modify it a little to make sure the files are built in dist/before nodemon tries to start the server.

这是基于@ThomasThiebaud 提出的解决方案。我不得不稍微修改它以确保dist/在 nodemon 尝试启动服务器之前内置文件。

"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"
  },

You still need to run npm startto start the whole thing.

您仍然需要运行npm start才能开始整个过程​​。

回答by Gh111

Here is my approach, let say that you keep all your typescriptfiles in srcfolder and want outputted javascriptfiles be generated in the ./distfolder.

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

{
    "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"
    }
}

and typescript configuration file tsconfig.json

和打字稿配置文件 tsconfig.json

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

Okay, what is going on here

好的,这是怎么回事

First of all we should create tsconfig.jsonand tell typescript to put compiled files into the ./distfolder and at the same time we should exclude node_modulefolder or whatever we want and include everything from ["./src/**/*"]directory.

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

After that in packages.jsonfile we should specify path to our compiled index.jsfile

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

"main": "./dist/index"

"main": "./dist/index"

and finally we tell tscto --watchany typescriptchanges, and nodemonto watch inside ./distdirectory and if something changes nodemonwill restart the server.

最后我们告诉tsc--watch任何typescript变化,nodemon内部看./dist目录,如果有新的变化nodemon将重新启动服务器。

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

To run script type npm run dev

运行脚本类型 npm run dev