3 分鐘閱讀 次瀏覽

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

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

typescript30tech

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

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

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

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

  1. 新增2個資料夾 src 及 dist

  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.js在dist的資料夾。
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，但那時我根本懵查查，決定把他挪到前面講， 後面看就會比較順～

參考資料

https://www.typescripttutorial.net/typescript-tutorial/nodejs-typescript/

相關文章

留言