我相信剛開始接觸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.json與package.json一起自動處理,所以又把這兩個功能加進去做成CLI工具了。
我平常是用yarn做套件管理器,為了兼顧npm與pnpm的使用者,又加入了套件管理器偵測功能,所以編譯需要的開發套件都會用對應的套件管理器安裝。
為什麼它叫ts-init-go?
一開始它叫ts-init-template,只是我用這名字一天內就後悔了。
我發現每次都要輸入這麼長的名字,還要記住這一大串英文,這對很多人來說應該是場折磨,我身為這工具的開發者當然會記得它,但我不能要求別人也記得這麼又臭又長的名字吧?
所以我想改成ts-init,但npm上有人用了,最終我決定叫它ts-init-go。
go是從ready to go這個概念來的:準備好就能起飛,簡單、俐落、有行動感。



















