Giới thiệu
Bun là một công cụ mạnh mẽ giúp phát triển ứng dụng full-stack với TypeScript trở nên đơn giản hơn bao giờ hết. Với tốc độ chạy nhanh, máy chủ phát triển có khả năng tải lại nóng (HMR), và một bundler, chúng ta sẽ cùng nhau xây dựng một ứng dụng tối thiểu để phục vụ một trang HTML, gắn một component Preact, và cung cấp một API nhỏ.
Nội dung ứng dụng
Bạn sẽ có được:
- Một máy chủ Bun đơn giản (phục vụ HTML và một route API nhỏ).
- Một client Preact gắn vào
#root. - Các script cho chế độ phát triển (có tải lại nóng) và sản xuất.
plaintext
src/
├─ index.ts # entry máy chủ
├─ index.html # khung HTML
└─ client.tsx # entry clientĐó là tất cả - không có gì phức tạp, chỉ đủ để khởi động một ứng dụng Bun full-stack.
1. Khởi tạo dự án
Chạy lệnh sau để khởi tạo:
bash
bun initLệnh này sẽ tạo ra file package.json, tsconfig.json, và một vài cấu hình mặc định hữu ích.
2. Cài đặt Preact
Để cài đặt Preact, sử dụng lệnh:
bash
bun add preactPreact cung cấp cho chúng ta một API tương thích với React nhưng nhẹ hơn. Hiện tại, chúng ta sẽ chỉ sử dụng nó ở phía client.
3. Chỉ định TypeScript vị trí của JSX
Thêm đoạn sau vào phần compilerOptions trong file tsconfig.json:
json
{
"compilerOptions": {
"jsxImportSource": "preact"
}
}Tại sao? Với các runtime JSX hiện đại, TypeScript cần biết thư viện nào cung cấp các hàm JSX. Việc thiết lập jsxImportSource thành preact đảm bảo rằng các file .tsx của bạn sẽ sử dụng runtime của Preact, tránh lỗi “JSX not found” hoặc loại không khớp.
4. Tạo các file ứng dụng
Chạy lệnh sau để tạo các file cần thiết:
bash
mkdir src \
&& mv index.ts src/index.ts \
&& touch src/index.html \
&& touch src/client.tsxChúng ta sẽ giữ tất cả trong thư mục src/ để dễ quản lý. index.ts sẽ là entry cho máy chủ, index.html là khung HTML, và client.tsx là entry cho Preact.
5. Thêm script vào package.json
Chèn đoạn mã sau vào file package.json:
json
{
"scripts": {
"dev": "bun --hot src/index.ts",
"start": "NODE_ENV=production bun src/index.ts"
}
}dev- khởi động Bun với tính năng tải lại nóng, cho phép Bun tự động chạy lại file khi có bất kỳ thay đổi nào.start- chạy ở chế độ sản xuất (không có tải lại nóng).
6. Tạo khung HTML
Chèn đoạn mã sau vào src/index.html:
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ứng dụng Bun + Preact</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./client.tsx"></script>
</body>
</html>Tại sao? Đây là trang duy nhất mà máy chủ của chúng ta sẽ trả về cho tất cả các route. Dòng <script type="module"> chỉ định đến entry client của chúng ta, giúp Bun có thể đóng gói và biến đổi nó khi cần thiết.
7. Viết máy chủ
Chèn đoạn mã sau vào src/index.ts:
typescript
import { serve } from "bun";
import index from "./index.html";
const server = serve({
routes: {
"/*": index,
"/api/hello": () => Response.json({ message: "Xin chào, thế giới!" }),
},
development: process.env.NODE_ENV === "development" && {
hmr: true,
console: true,
},
});
console.log(`Máy chủ đang chạy tại ${server.url}`);Chuyện gì xảy ra:
- Máy chủ trả về
index.htmlcho bất kỳ path nào (/*) và phản hồi JSON tại/api/hello. - Khi
NODE_ENV=development, Bun sẽ bật chế độ phát triển cho máy chủ này:- HMR sẽ truyền tải các cập nhật client đến trình duyệt.
- Console overlay sẽ phản ánh các log/lỗi từ trình duyệt tới terminal của bạn.
- Ở chế độ sản xuất (
NODE_ENV=production), các tính năng phát triển sẽ tắt - máy chủ chỉ phục vụ các route như bình thường.
8. Viết client
Chèn đoạn mã sau vào src/client.tsx:
typescript
import { render } from "preact";
const root = document.getElementById("root");
if (!root) {
throw new Error("Không tìm thấy phần tử gốc");
}
function App() {
return <h1>Xin chào, thế giới!</h1>;
}
render(<App />, root);Tại sao chọn Preact? Nó sử dụng cùng một mô hình component như React, vì vậy nếu bạn đã biết React, bạn có thể làm việc ngay lập tức. Đồng thời, kích thước của nó nhỏ hơn nhiều, điều này giúp nó phù hợp với cấu hình sử dụng Bun, nơi bạn muốn có thời gian khởi động nhanh và các bundle nhẹ.
Chạy ứng dụng
Chạy các lệnh sau để khởi động ứng dụng:
bash
bun run dev # chế độ phát triển
bun run start # chế độ sản xuấtMở URL đã in ra (thường là http://localhost:3000). Thử chỉnh sửa src/client.tsx hoặc src/index.ts - bạn sẽ thấy các cập nhật ngay lập tức.
Kết luận
Vậy là bạn đã có một ứng dụng Bun full-stack nhỏ gọn với Preact, có tính năng tải lại nóng và một API ví dụ - hoàn hảo để làm hạt giống cho các dự án phụ và demo. Hãy thử nghiệm và phát triển thêm nhé!
Các thực hành tốt nhất
- Sử dụng TypeScript: Hãy luôn sử dụng TypeScript để tận dụng tính năng kiểm tra kiểu.
- Tối ưu hóa hiệu suất: Hãy cân nhắc đến việc tối ưu hóa bundle cho ứng dụng của bạn ngay từ đầu.
Các cạm bẫy thường gặp
- Quên cài đặt Preact: Đảm bảo rằng bạn đã cài đặt Preact trước khi sử dụng.
- Lỗi thuộc tính không tìm thấy: Kiểm tra lại tên các thuộc tính trong component.
Mẹo hiệu suất
- Sử dụng lazy loading: Tải các component chỉ khi cần thiết để giảm tải ban đầu.
Khắc phục sự cố
- Không thể tìm thấy phần tử gốc: Đảm bảo rằng ID của phần tử gốc trong HTML đúng như trong mã.
Câu hỏi thường gặp (FAQ)
Làm thế nào để triển khai ứng dụng này?
Bạn có thể triển khai ứng dụng bằng cách sử dụng các dịch vụ như Vercel hoặc Netlify.
Có thể sử dụng các thư viện khác với Bun không?
Có, bạn có thể sử dụng hầu hết các thư viện JavaScript mà bạn quen thuộc.
