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
How to compile typescript using npm command?
提问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

