ts-init-go: 因為我懶而做出的TypeScript開發環境快速建構工具

瞪-avatar-img
發佈於dev日誌
更新 發佈閱讀 5 分鐘

我相信剛開始接觸ts的人一定會覺得ts的初始化又臭又長。

跟JS裝幾個套件就能跑不同,你除了裝套件,還要去改一堆諸如tsconfig.json跟package.json裡面的內容,然後還要編譯才能跑,這還不包含中間一堆編譯可能會出的什麼版本問題...

我就是覺得每次都這樣挺煩的,才寫了這東西。

ts-init-go是什麼?

它是我寫的一套TS開發環境建構工具。

是CLI工具,不需要當成套件安裝,只要使用npx執行即可。

ts-init-go的用法

首先,不管你用什麼套件管理器,先初始化,再跑ts-init-go

(這裡以yarn為例)

yarn init -y
npx ts-init-go

跑完後,它會執行以下的動作,把該建置好的東西直接整捆打包好丟進你的專案資料夾:

  • 新增tsconfig.json
  • 更改package.json應該要改動的內容(type, script
  • 新增build.js,是我自己編寫的編譯工具,編譯的同時還能幫你同步ts資料夾src/跟編譯資料夾dist/的內容
  • 新增src資料夾

接下來,請在src/資料夾裡編寫code。

我的主要檔案預設是index.ts,編譯過來就是index.js,如果需要改動,請各位記得在package.json自行調整。

等到code寫完,要編譯請跑:

yarn build

這個指令會使用build.js幫你編譯所有檔案到dist/資料夾裡,跑完後再用:

yarn start

這樣基本上就能執行了。

未來如果有增減或改動src/裡的檔案,記得再跑一次yarn build,這樣才會同步兩邊的內容。

我測試過,在我用空資料夾從初始化開始,中間輸錯字好幾次的狀況下,我還是只用了1分鐘左右就跑了Hello, World!出來。

從此我的人生輕鬆了很多。

開發 Roadmap

一開始開發這工具的確是我懶,但我個人的理念是,它能有多泛用,我就做到多泛用。

我目前的規劃方向如下:

  • ✅ 自動偵測 yarn/npm/pnpm(已完成)
  • 🔜 改寫成內建 CLI 引導流程(讓第一次使用者知道接下來要幹嘛,不用看教學)
  • 🔜 目前全部預設是我慣用的 ESNext,不久的將來應該會讓使用者能自己選擇要用 CJS 還是 ESM,以及更多版本細分的選項。

開發理念

就是懶。

一開始是因為ts的編譯太麻煩,單用tsc有ESM與CJS的版本問題,我用了esbuild去處理這問題,然後完全改成ESM建置,又會牽扯到很多設定。最後的結果就是build.js出現了。

接著我又處理了另一個很常見的問題:dist/src/ 資料夾不同步。

你如果調整src/的結構,編譯後只會編譯src/裡原有的檔案,但是已經不存在的檔案還是會存在在dist/裡,所以還需要手動調整。

於是我乾脆把上述動作全都包進build.js裡了。

我接下來的想法是,乾脆把本來就要處理的tsconfig.jsonpackage.json一起自動處理,所以又把這兩個功能加進去做成CLI工具了。

我平常是用yarn做套件管理器,為了兼顧npmpnpm的使用者,又加入了套件管理器偵測功能,所以編譯需要的開發套件都會用對應的套件管理器安裝。

為什麼它叫ts-init-go?

一開始它叫ts-init-template,只是我用這名字一天內就後悔了。

我發現每次都要輸入這麼長的名字,還要記住這一大串英文,這對很多人來說應該是場折磨,我身為這工具的開發者當然會記得它,但我不能要求別人也記得這麼又臭又長的名字吧?

所以我想改成ts-init,但npm上有人用了,最終我決定叫它ts-init-go

go是從ready to go這個概念來的:準備好就能起飛,簡單、俐落、有行動感。

相關連結

留言
avatar-img
阿瞪的游離幻境
0會員
1內容數
分享一些我想分享的
你可能也想看
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
成功加入Anytype之後就可以開始探索這一個開源的筆記軟體了^_^ 開始Anytype之前..... 1.刪除所有初始物件 2.思考自己的使用需求 3.不著急學會所有功能
Thumbnail
成功加入Anytype之後就可以開始探索這一個開源的筆記軟體了^_^ 開始Anytype之前..... 1.刪除所有初始物件 2.思考自己的使用需求 3.不著急學會所有功能
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News