[筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (3)

斷斷續續碰了一些 TypeScript 的內容,但在實務上始終缺乏一個概念式的整理,導致沒辦法隨心所欲的規劃使用。這回找上 Hiskio 上的「布魯斯的 TypeScript 入門教學」課程,看能不能有所進步。此篇會筆記下如何整合到 webpack 環境中。
typescript


課程相關資訊

[連結]:https://hiskio.com/courses/628/lectures/33124

本篇範圍:Chapter 2

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


內容

1. 在原先的 Webpack + JS 專案中,先加入 typescript 和 ts-loader ( npm i typescript ts-loader –D )
2. 你需要有一個 tsconfig.json,並更改 webpack 的 entry 入口檔案為 .ts 和專案 index.js -> index.ts
3. webpack 裡面要加入 ts-loader
4. ts-loader 可以完全取代 babel-loader 的功能,所以可以移除
5. webpack 的設定檔中要加入 resolve 副檔名表,這樣一來 webpack 才會去編譯
6. tsconfig.json 中加入 “sourceMap”: true,並改寫 webpack 的 sourceMap 設定值為 inline-source-map,你就利用瀏覽器的開發工具即時跳到發生錯誤的地方
7. tsconfig.json 避免使用 commonJs,因為這樣會沒有辦法進行 tree-shaking
8. babel 編譯若最後沒有用到,你可以將其移除


系列文章

  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (9)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (8)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (7)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (6)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (5)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (4)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (2)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (18)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (17)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (16)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (15)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (14)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (13)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (12)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (11)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (10)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (1)
  • 按讚加入粉絲團

    延伸閱讀