เริ่มต้นโปรเจ็ค TypeScript แบบง่าย ไม่เกิน 10 นาที!

วันนี้เรามาใช้ตัว Bun ในการสร้างโปเจ็ค TypeScript กันครับ ซึ่งเจ้าตัว Bun มีความสามารถหลายอย่างมาก ไม่ว่าจะเป็น package manager, test runner, build tool แถมยังทำงานเร็วมากๆ ด้วย

มาย้อนดูวิธีการ setup TypeScript แบบเก่ากันก่อนครับ โดยจะใช้ Repo นี้เป็นตัวอย่าง

https://github.com/redcartel/node-express-typescript-starter-2022/blob/main/package.json

  "scripts": {
    "build": "tsc",
    "start": "cross-env NODE_ENV=production dotenv -e .env node dist/src/index.js",
    "dev": "cross-env NODE_ENV=development nodemon",
    "test": "cross-env NODE_ENV=test dotenv -e .env jest",
    "test:watch": "cross-env NODE_ENV=test dotenv -e .env jest --watch",
    "lint": "npx eslint src"
  },

ถ้าเราไปดู package.json ในส่วนของ scripts จะเห็นว่าในการ build, start, dev, test ล้วนใช้คนละ package ทำงานกันหมดเลย ทำให้เราต้องลงหลายตัวกว่าจะทำงานได้ แต่ถ้าเราใช้ Bun ทั้งหมดจะสามารถทำงานด้วยได้เพียงคำสั่ง bun เพียงอันเดียวเท่านั้น ไม่ต้องลงอะไรเพิ่ม มาลองทำตามกันเลยดีกว่า!

เริ่มต้นด้วยการลงตัว bun cli กันก่อนโดยการ copy คำสั่งข้างล่างไปลงใน terminal

curl -fsSL https://bun.sh/install | bash

หลังจากนั้นทำการสร้าง folder ใหม่ขึ้นมา

mkdir myproject

ทำการเริ่มต้นโปรเจ็คด้วยคำสั่ง

bun init

หลังจากนั้นเราจะได้ไฟล์ต่างๆ ขึ้นมาใน folder เราแบบนี้

.
├── README.md
├── index.ts
├── node_modules
├── package.json
└── tsconfig.json

จะเห็นว่าไม่มี src folder อยู่เลย แต่ก่อนอื่นต้องลง package ต่างๆ กันก่อน
โดยปกติเราจะใช้คำสั่ง npm install กันใช่ไหมครับ แต่ตัว Bun ยังทำหน้าที่เป็น package manager ด้วย ซึ่งเค้าเคลมว่าเร็วกว่าตัวอื่นๆ มากเลยทีเดียว

ให้เราทำการลง package ต่างๆ ด้วยคำสั่ง

bun install

แล้วทำการรันไฟล์ TypeScript ที่ต้องการได้เลยด้วยคำสั่ง

bun run index.ts

แต่เราจะพบว่า เวลาเราแก้ไขไฟล์แล้ว ตัวไฟล์มันไม่ได้รันใหม่โดยอัตโนมัติ โดยปกติแล้วเราอาจจะต้องใช้ nodemon ในการให้มันรันใหม่ทุกครั้ง แต่ตัว Bun สามารถทำตรงนี้ได้โดยใช้คำสั่ง

bun --watch run index.ts

นอกจากนั้นเวลารันเทส ปกติแล้วเราจะต้องใช้ jest ใช่ไหมครับ ตัว Bun ก็มีคำสั่งสำหรับรันเทสด้วย เบื้องหลังก็ใช้ jest อีกทีนั่นแหละ โดยใช้คำสั่ง

//math.ts
export function add(a: number, b: number) {
  return a + b
}

// index.ts
import { add } from "./math"
console.log("Hello via John!")
console.log("2+2=", add(2, 2))

// math.test.ts
import { add } from "./math"
import { expect, test } from "bun:test"

test("2+2=4", () => {
  expect(add(2, 2)).toBe(4)
})

bun test math.test.ts

เราก็จะได้ผลเทสออกมาแบบนี้ครับ

สุดท้ายแล้ว หากเราต้องการนำโค้ดไปรันบน production เราก็สามารถทำการ build โดยใช้คำสั่ง

bun build index.ts  --outdir ./build

มันจะทำการแปลงตัวไฟล์ TypeScript ทั้งหมด เป็น JavaScript เข้าไปเก็บลงในโฟลเดอร์ build ให้เลย พร้อมทำการรันได้เลย

├── README.md
├── build
│   └── index.js
├── bun.lockb
├── index.ts
├── math.test.ts
├── math.ts
├── node_modules
├── package.json
└── tsconfig.json

ซึ่งสามารถใช้ตัว node หรือ bun รันก็ได้ครับ

node build/index.js
bun build/index.js

แต่จะมีข้อควรระวังอย่างนึง ถ้าใช้ bun ในการรัน อาจมีพวก native package ของ Node.js ไม่ครบ เราควรไปเช็คก่อนที่ลิ้งข้างล่างได้ครับ

https://bun.sh/docs/runtime/nodejs-apis

สรุป

จะเห็นว่าเราสามารถใช้ bun เป็น คำสั่งในการ build, test, watch, run โค้ดต่างๆ ได้ในคำสั่งเดียวเลย ทำให้ใช้งานได้สะดวกขึ้น และเริ่มโปรเจ็คได้เร็วขึ้นครับ