Day03:【TypeScript 學起來】自動編譯 tsc + nodemon 好方便

老婆:”下班後買十個包子回來,如果看到賣西瓜的就買一個。”
老公:”好。” (下班後帶著一個包子回家)
老婆:”為什麼只有一個包子?”
老公:”因為我看到賣西瓜的。”

// 哈哈哈 這個超經典的 這不是笑話 根本就是日常會發生的事啦 XD


上一篇有提到,我們每寫一次都要手動 tsc xx.ts 跟 node xx.js, 是不是很累,我就是很累,所以來分享這篇,讓我們可以自動編譯,加速學習時間。

  1. 新增2個資料夾 srcdist
  2. src 檔案新增 index.ts, 並寫入:
const index:string = "this's index";
console.log(index);
  1. 資料夾架構會長這樣:
project

└───dist
│   │   
│   
└───src
    │   index.ts
  1. 我們在資料夾初始化專案, 執行 npm 起手式:
npm init -y
  1. 執行下方指令,就會產生 tsconfig.json 檔案,是 TS 初始化設置文件。
tsc --init
  1. 打開 tsconfig.json,設定 outDir 及 rootDir 的路徑。
"outDir": "./dist", //完成編譯後生成 js 文件的路徑                           
"rootDir": "./src",   //代表 ts 文件的入口路徑
  1. 執行tsc,會看見編譯後的index.jsdist的資料夾。
tsc
  1. 執行下方指令, 安裝 nodemon 及 concurrently:
npm i nodemon concurrently --save-dev
  1. 在 package.json 修改 script 的指令。
  "scripts": {
    "start:build": "tsc -w",  //watch src的ts檔並自動編譯js檔
    "start:run": "nodemon ./dist/index.js", //當有新的js檔產生則去執行
    "start": "concurrently npm:start:*" //執行全部含有start的指令(包含 start:build 及 start:run)
  },
  1. 執行 :
npm start
  1. 此時,我們可以看到dist資料夾已編譯好js檔, 且在終端機也印出了 this's index, 表示執行成功~
project
│   node_modules
│   package-lock.json 
│   package.json 
│   tsconfig.json 
│
└───dist
│   │   index.js
│   
└───src
    │   index.ts

![](https://i.imgur.com/uwn998F.png =500x)

是不是很方便~demo可看這裏, 我有同步在github。


這一篇設定在 tsconfig.json 設定了 outDir 及 rootDir ,下一篇就來筆記 tsconfig.json 還有哪些設定。 因為剛開始在看 handbook 介紹型別時發現他有提到 tsconfig,但那時我根本懵查查,決定把他挪到前面講, 後面看就會比較順~

參考資料

Leave a Comment

Your email address will not be published. Required fields are marked *

ZH-TW EN ES