因?yàn)門S代碼，是不能直接在瀏覽器和node環(huán)境下運(yùn)行的，所以我們要先編譯成js代碼

一般情況下，我們會(huì)在package.json里配置scripts命令來對(duì)TS代碼進(jìn)行打包

image.png

如果單純的只配置scripts命令，那么打包出來的js文件，是存放在src目錄的，但是 一般情況下，我們都要求打包文件是單獨(dú)存放一個(gè)文件夾的，比如build文件夾。這個(gè)時(shí)候就需要配置tsconfig.json文件了。

image.png

如果我們每次修改了ts文件，然后再去運(yùn)行 npm run build命令打包，會(huì)稍顯麻煩。理想狀態(tài)是當(dāng)我們修改了ts文件，TS檢測(cè)到文件的變化，自動(dòng)幫我們打包生成新的js文件。該怎么配置呢？

• 在tsc命令后 加一個(gè) -d，代表著當(dāng)我們運(yùn)行了 tsc命令后，就一直監(jiān)控著ts文件的變化，一有變化就打包。

  
  
  image.png

在編譯完成以后，如果我們還想再自動(dòng)的去運(yùn)行編譯好的文件，該怎么辦呢？ 這個(gè)時(shí)候，我們可以安裝一個(gè)node的工具 nodemon,npm install nodemon -D，它會(huì)檢測(cè)整個(gè)項(xiàng)目下文件的變化，然后幫我們做一些事情。

• 我們重新配置一個(gè)命令start,當(dāng)我們運(yùn)行 npm run start的時(shí)候，nodemon就會(huì)監(jiān)控整個(gè)項(xiàng)目文件的變化，當(dāng)文件發(fā)生變化的時(shí)候，就會(huì)去執(zhí)行 當(dāng)前目錄下的build文件夾下的crawler.js文件。

  
  
  image.png

這個(gè)時(shí)候，當(dāng)運(yùn)行npm run start命令的時(shí)候，會(huì)發(fā)現(xiàn)，命令行會(huì)重復(fù)執(zhí)行這個(gè)命令。主要是因?yàn)閐ata目錄下的生成的文件被檢測(cè)到變化了，導(dǎo)致了循環(huán)執(zhí)行。為了避免這個(gè)情況發(fā)生，需要再對(duì)nodemon做一些配置，這樣配置后，就只檢測(cè)build里的js文件了。

image.png

至此，我們就實(shí)現(xiàn)了，讓我們修改TS源碼的時(shí)候，會(huì)重新編譯。重新編譯后，build文件夾下的js文件發(fā)生了變化，然后執(zhí)行這個(gè)變化過的js文件，執(zhí)行過之后，data下生成的文件就會(huì)更新這樣一個(gè)流程。這個(gè)流程只是開發(fā)環(huán)境下做的事情。

• 剛才我們是要同時(shí)運(yùn)行兩個(gè)命令 tsc -w,nodemon node ./build/crawler.js。我們也可以安裝個(gè)工具，只運(yùn)行一次。npm install concurrently -D

• 創(chuàng)建script命令

  
  
  image.png

• 該命令也可以縮寫

  
  
  image.png