[英]How to compile typescript using npm command?
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 in order 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命令
You can launch the tsc
command (typescript compiler) with --watch
argument. 您可以使用
--watch
参数启动tsc
命令( --watch
编译器)。
Here is an idea : 这是一个想法:
tsconfig.json
file tsconfig.json
文件配置tsconfig.json
tsc --watch
, so every time you change a .ts
file, tsc
will compile it and produce the output (let say you configured typescript to put the output in ./dist
folder) tsc --watch
,所以每次更改.ts
文件时, tsc
都会编译它并生成输出(假设你配置了./dist
将输出放在./dist
文件夹中) nodemon
to watch if files in ./dist
have changed and if needed to relaunch the server. nodemon
监视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 start
in a terminal 然后你只需要在终端中运行
npm start
This is based on solution proposed by @ThomasThiebaud. 这是基于@ThomasThiebaud提出的解决方案。 I had to modify it a little to make sure the files are built in
dist/
before nodemon tries to start the server. 在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"
},
You still need to run npm start
to start the whole thing. 你仍然需要运行
npm start
来启动整个事情。
Here is my approach, let say that you keep all your typescript
files in src
folder and want outputted javascript
files be generated in the ./dist
folder. 这是我的方法,假设您将所有
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"
}
}
and typescript configuration file tsconfig.json
和
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.json
and tell typescript to put compiled files into the ./dist
folder and at the same time we should exclude node_module
folder or whatever we want and include everything from ["./src/**/*"]
directory. 首先,我们应该创建
tsconfig.json
并告诉tsconfig.json
将编译后的文件放入./dist
文件夹中,同时我们应该排除node_module
文件夹或我们想要的任何内容,并包含["./src/**/*"]
目录。
After that in packages.json
file we should specify path to our compiled index.js
file 在
packages.json
文件之后,我们应该指定编译的index.js
文件的路径
"main": "./dist/index"
“main”:“。/ dist / index”
and finally we tell tsc
to --watch
any typescript
changes, and nodemon
to watch inside ./dist
directory and if something changes nodemon
will 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
Compiling TypeScript编译打字稿
tsc filename.ts | tsc 文件名.ts | node filename.js (for windows user).
节点文件名.js(适用于 Windows 用户)。
tsc filename.ts && node filename.js (for Mac user). tsc filename.ts && node filename.js(Mac 用户)。
"scripts": {
"build": "tsc -b"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.