TS打包

因为TS代码，是不能直接在浏览器和node环境下运行的，所以我们要先编译成js代码

一般情况下，我们会在package.json里配置scripts命令来对TS代码进行打包

image.png

如果单纯的只配置scripts命令，那么打包出来的js文件，是存放在src目录的，但是 一般情况下，我们都要求打包文件是单独存放一个文件夹的，比如build文件夹。这个时候就需要配置tsconfig.json文件了。

image.png

如果我们每次修改了ts文件，然后再去运行 npm run build命令打包，会稍显麻烦。理想状态是当我们修改了ts文件，TS检测到文件的变化，自动帮我们打包生成新的js文件。该怎么配置呢？

• 在tsc命令后 加一个 -d，代表着当我们运行了 tsc命令后，就一直监控着ts文件的变化，一有变化就打包。

  
  image.png

在编译完成以后，如果我们还想再自动的去运行编译好的文件，该怎么办呢？ 这个时候，我们可以安装一个node的工具 nodemon,npm install nodemon -D，它会检测整个项目下文件的变化，然后帮我们做一些事情。

• 我们重新配置一个命令start,当我们运行 npm run start的时候，nodemon就会监控整个项目文件的变化，当文件发生变化的时候，就会去执行 当前目录下的build文件夹下的crawler.js文件。

  
  image.png

这个时候，当运行npm run start命令的时候，会发现，命令行会重复执行这个命令。主要是因为data目录下的生成的文件被检测到变化了，导致了循环执行。为了避免这个情况发生，需要再对nodemon做一些配置，这样配置后，就只检测build里的js文件了。

image.png

至此，我们就实现了，让我们修改TS源码的时候，会重新编译。重新编译后，build文件夹下的js文件发生了变化，然后执行这个变化过的js文件，执行过之后，data下生成的文件就会更新这样一个流程。这个流程只是开发环境下做的事情。

• 刚才我们是要同时运行两个命令 tsc -w,nodemon node ./build/crawler.js。我们也可以安装个工具，只运行一次。npm install concurrently -D

• 创建script命令

  
  image.png

• 该命令也可以缩写

  
  image.png