TS的编译运行的进一步理解

tsc命令

• tsc： 将ts文件编译为js文件

安装

npm i typescript -D

使用

tsc [文件名]   // 不加文件名，编译全部的ts文件

ts-node命令

• ts-node： 将ts文件内部编译成js，然后执行js代码（不会生成js代码）

安装

npm i ts-node -D

使用

ts-node index.ts

如何将编译的js文件单独放在另一个目录中

直接执行tsc，生成的js文件和ts文件都混在一个目录里，现在要ts和js文件分开，编译生成的js单独放在dist目录

解决方法：tsconfig.json中有个配置项：outDir；如下进行配置

{
	"compilerOptions": {
		"outDir": "./dist",   
	}
}

如何ts文件修改后动态编译js文件？

-w 可以动态监听ts文件的修改并实时编译成js文件

tsc -w

nodemon

在node环境下执行js文件

node index.js

如何监听js文件变化；可以使用nodemon

安装

npm i nodemon -D

使用

nodemon node index.js

实现功能：动态编译ts文件，并动态执行js文件

在package.json中

  "scripts": {
    "build": "tsc -w",  
    "start": "nodemon node ./dist/crowller.js"
  }, 

执行npm run build会动态编译ts文件；
然后执行npm start会动态执行js文件

产生的问题1：
问题：

• 执行上述命令后， nodemon会一直反复的不断执行

原因：

• 代码执行后会动态往data/data.json中写入数据，写入数据表示文件有变化，又触发nodemon，然后再写入，再触发nodemon，如此循环下去

解决：

• nodemon进行配置，过滤data目录下的文件

在package.json中

 "scripts": {
    "build": "tsc -w",  
    "start": "nodemon node ./dist/crowller.js"
  }, 
  "nodemonConfig": {
    "ignore": [
      "data/*"
    ]
  },

产生的问题2：
执行命令后会同时开启两个命令行窗口，有没有办法只开启一个命令行呢？
答案是有的，使用concurrently来并行执行

安装

npm i concurrently -D

使用

  "scripts": {
    "dev:build": "tsc -w",
    "dev:start": "nodemon node ./dist/crowller.js",
    "dev": "concurrently npm:dev:build npm:dev:start" 
  },

npm:dev:build的第一个冒号是固定写法，可以看做是run；第二个是命令dev:build中自带的；多个命令之间空格来间隔
如果命令是dev-build，那么下面应该写成npm:dev-build

启动时输入 npm run dev即可

命令优化
npm:dev:build npm:dev:start可以简写为npm:dev:*，就是运行所有带dev:的命令

最终优化的命令

package.json中

  "scripts": {
    "dev:build": "tsc -w",
    "dev:start": "nodemon node ./dist/crowller.js",
    "dev": "concurrently npm:dev:*"
  },
  "nodemonConfig": {
    "ignore": [
      "data/*"
    ]
  },

tsconfig.json中

{
	"compilerOptions": {
		"outDir": "./dist",   
	}
}