adaydesign
บล็อกนี้จะมาแนะนำวิธีการสร้างโปรเจค React ด้วย Bun กัน ปัจจุบัน Bun ได้ชื่อว่าเป็น JavaScript runtime ที่เร็วที่สุด (ตอนนี้อยู่ที่เวอร์ชัน v0.1.5) และแน่นอนว่า Bun นั้นก็รองรับการสร้างโปรเจค React ด้วย วันนี้เราจะมาลองสร้างโปรเจค React จาก Bun กันครับ
เริ่มต้น เราต้องติดตั้ง Bun ที่เครื่องที่ใช้พัฒนาก่อน
การติดตั้ง Bun
ระบบปฏิบัติการที่ Bun รองรับในการติดตั้ง ได้แก่ macOS x64 กับ Silicon และ Linux x64 และ Windows Subsystem for Linux
ขั้นตอนการติดตั้งง่ายๆ โดยรันคำสั่งด้านล่างนี้ได้เลย
curl https://bun.sh/install | bash
จากนั้นทดสอบด้วยคำสั่ง
bun --helpหากเครื่องไม่พบคำสั่ง bun ให้รันคำสั่งนี้ก่อน
exec /bin/zsh
bun --help
เมื่อเราทำการติดตั้งและทดสอบคำสั่ง help ของ Bun เรียบร้อยแล้ว จากนั้น เราจะทำการทดสอบสร้างโปรเจค React จากคำสั่งของ Bun กันดู
การสร้างโปรเจค React ด้วย Bun
การสร้างโปรเจค React ด้วย Bun จะใช้คำสั่ง bun create react แล้วตามด้วยชื่อ โฟลเดอร์ของ โปรเจคที่เราต้องการ ในตัวอย่างใช้ชื่อว่า app-name จากนั้นก็รอให้โปรแกรมติดตั้งจนเสร็จ (ใช้เวลาไม่นาน)
bun create react ./app-name
เมื่อติดตั้งเสร็จแล้ว
การรันโปรเจค React
เมื่อเราติดตั้งโปรเจค React เสร็จเรียบร้อยแล้วให้ เข้าไปโฟลเดอร์ โปรเจคที่เราสร้างขึ้น แล้วรันคำสั่ง bun dev เพื่อรัน React โปรเจค
bun devเท่านี้ก็สามารถรันโปรเจค React ด้วย Bun ได้แล้ว ไม่ยากเลยใช่มั้ยครับ
การรัน script อื่นๆ ของ node เราสามารถทำใน Bun ได้ เช่น เราต้องการรันคำสั่ง react-script
ก่อนอื่น จะต้องติดตั้ง react-scripts ก่อน ด้วยคำสั่ง
bun add react-scriptsเมื่อติดตั้ง react-scripts เสร็จแล้ว ให้ตรวจสอบว่ามีชื่อแพ็กเก็ต react-scripts อยู่ที่ dependencies ในไฟล์ package.json แล้วรึยัง หากมีแล้วแสดงว่าติดตั้งได้ถูกต้อง
จากนั้นให้เพิ่มคำสั่งการรัน react-scripts ที่เราคุ้นเคยกันเข้าไปไว้ในไฟล์ package.json ดังนี้
{
...
"scripts": {
"start": "bun dev",
"build": "react-scripts build"
},
...
}จากนั้นเราจะใช้คำสั่ง bun start สำหรับเริ่มโปรมแกรม
bun startและใช้คำสั่ง bun run build สำหรับการสร้างโฟลเดอร์ build เพื่อจะนำไปใช้งานต่อไป
bun run buildบทส่งท้าย
Bun มีความโดดเด่นเรื่องความรวดเร็วในการ ติดตั้งไลบรารี่ และการรันคำสั่งต่างๆ รวมถึงความเร็วในการประมวลผล ตัวอย่างเช่น Server-side rendering React, Load a huge table บน sqlite และ bun:ffi
สำหรับคนที่อยากลองใช้ Javascript Runtime ตัวอื่นนอกจาก npm หรือ yarn หรือ pnpm เพื่อรันโปรเจค React แล้ว Bun เป็นหนึ่งในตัวเลือกที่น่าสนใจทีเดียว
นอกจากนี้ Bun ยังรองรับ TypeScript ด้วย เพียงแค่ เปลี่ยนนามสกุลไฟล์จาก .js เป็น .ts หรือจากไฟล์ .jsx เป็น .tsx ก็สามารถใช้ typeScript ในโปรเจค ได้โดยไม่ต้องลงอะไรเพิ่มอีก
แต่ที่สำคัญ ณ ตอนนี้คือ Bun ยังอยู่ในช่วงที่พัฒนาอยู่ ยังมีอีกหลายฟีเจอร์ที่ยังอยู่ในช่วงพัฒนา เช่น Web Streams with Fetch API, Web Streams with HTMLRewriter, WebSocket Server เป็นต้น (อ่านต่อที่ https://github.com/oven-sh/bun/issues/159)
นอกจาก React แล้ว Bun ยังสามารถสร้างโปรเจคของ Next.js ได้ด้วยคำสั่ง
bun create next ./appนอกจากการสร้างโปรเจคทั้ง React และ Next.js แล้ว Bun ยังสามารถเขียนโปรแกรมด้วยไลบรารี่ของ Bun เองในการสร้างเป็นเซิฟเวอร์ การเชื่อมต่อกับฐานข้อมูล sqlite การจัดการไฟล์บนเว็บเซิฟเวอร์ และการสร้างเป็นเว็บเซิฟเวอร์ก็ได้เช่นกัน หากต้องการศึกษาเพิ่มเติมเกี่ยวกับ Bun สามารถอ่านได้ที่ https://bun.sh ได้เลย สำหรับบล็อกนี้เอาไว้เท่านี้ สวัสดีครับ
