回憶需求可以參考 Day 16. 來做個 TypeScript 專案吧
昨天規劃了專案結構，今天來實際把環境它們建置出來：
npm install typescript
tsconfig.json
tsc --init
package.json
npm init
index.html
這時我們的專案大概會像這樣
parcel-bundler
因為我們會預計在 index.html 裡面直接引用 .ts 檔案，所以我們還需要一個額外工具 parcel-bundler
parcel-bundler，他可以代替 node.js，讓我們的 typescript 程式碼可以直接運行
npm install -g parcel-bundler
要運行的話可以使用指令
parcel index.html
index.html 引入 index.ts
// index.html
<!DOCTYPE html>
<html lang="en">
<body>
<script src="./src/index.ts"></script>
</body>
</html>
這時我們可以測試看看 index.ts 是否有被正確引入
// index.ts
console.log('test 2023/09/19 !!!')
再執行 parcel index.html
有看到 log 的話就是正常囉
這時可以看到 dev tool 裡面的 Element，我們 HTML 變成引入編譯好的 .js 檔案
不想安裝 parcel-bundler 的同學可以不裝
直接使用 npx parcel index.html 指令
iThome鐵人賽
看影片追技術