نظرة عامة
أنشئ خادم HTTP بسيط باستخدام Bun.serve، وشغله محليًا، ثم طوره عن طريق تثبيت حزمة.
::: المتطلبات الأساسية: Bun مثبت ومتاح على PATH الخاص بك. راجع التثبيت للإعداد. :::
تهيئة مشروع جديد
قم بتهيئة مشروع جديد باستخدام bun init.
bun init my-appسيطلب منك اختيار قالب، إما Blank أو React أو Library. لهذا الدليل، سنختار Blank.
bun init my-app✓ Select a project template: Blank
- .gitignore
- CLAUDE.md
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc -> CLAUDE.md
- index.ts
- tsconfig.json (للاكمال التلقائي للمحرر)
- README.mdينشئ هذا تلقائيًا دليل my-app مع تطبيق Bun أساسي.
تشغيل الملف
شغّل ملف index.ts باستخدام bun run index.ts.
cd my-app
bun run index.tsHello via Bun!يجب أن ترى مخرج وحدة تحكم يقول "Hello via Bun!".
إنشاء خادم HTTP
استبدل محتويات index.ts بالكود التالي:
const server = Bun.serve({
port: 3000,
routes: {
"/": () => new Response('Bun!'),
}
});
console.log(`Listening on ${server.url}`);شغّل ملف index.ts مرة أخرى باستخدام bun run index.ts.
bun run index.tsListening on http://localhost:3000قم بزيارة http://localhost:3000 لاختبار الخادم. يجب أن ترى صفحة بسيطة تقول "Bun!".
هل ترى أخطاء TypeScript في Bun؟
إذا استخدمت bun init، فسيقوم Bun تلقائيًا بتثبيت تعريفات TypeScript الخاصة بـ Bun وتكوين tsconfig.json الخاص بك. إذا كنت تجرب Bun في مشروع موجود، فقد ترى خطأ نوع على العام Bun.
لإصلاح ذلك، قم أولاً بتثبيت @types/bun كاعتمادية تطوير.
bun add -d @types/bunثم أضف ما يلي إلى compilerOptions في tsconfig.json:
{
"compilerOptions": {
"lib": ["ESNext"],
"target": "ESNext",
"module": "Preserve",
"moduleDetection": "force",
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true
}
}تثبيت حزمة
قم بتثبيت حزمة figlet وتعريفات الأنواع الخاصة بها. Figlet هي أداة لتحويل السلاسل إلى فن ASCII.
bun add figlet
bun add -d @types/figlet # لمستخدمي TypeScript فقطحدّث index.ts لاستخدام figlet في routes.
import figlet from 'figlet';
const server = Bun.serve({
port: 3000,
routes: {
"/": () => new Response('Bun!'),
"/figlet": () => {
const body = figlet.textSync('Bun!');
return new Response(body);
}
}
});شغّل ملف index.ts مرة أخرى باستخدام bun run index.ts.
bun run index.tsListening on http://localhost:3000قم بزيارة http://localhost:3000/figlet لاختبار الخادم. يجب أن ترى صفحة بسيطة تقول "Bun!" في فن ASCII.
____ _
| __ ) _ _ _ __ | |
| _ \| | | | '_ \| |
| |_) | |_| | | | |_|
|____/ \__,_|_| |_(_)إضافة HTML
دعنا نضيف بعض HTML. أنشئ ملفًا جديدًا يسمى index.html وأضف الكود التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bun</title>
</head>
<body>
<h1>Bun!</h1>
</body>
</html>ثم، قم باستيراد هذا الملف في index.ts وقدمه من المسار / الجذر.
import figlet from 'figlet';
import index from './index.html';
const server = Bun.serve({
port: 3000,
routes: {
"/": index,
"/figlet": () => {
const body = figlet.textSync('Bun!');
return new Response(body);
}
}
});
console.log(`Listening on ${server.url}`);شغّل ملف index.ts مرة أخرى باستخدام bun run index.ts.
bun run index.tsListening on http://localhost:3000قم بزيارة http://localhost:3000 لاختبار الخادم. يجب أن ترى صفحة HTML الثابتة.
🎉 تهانينا! لقد أنشأت خادم HTTP بسيط مع Bun وقمت بتثبيت حزمة.
تشغيل سكربت
يمكن لـ Bun أيضًا تنفيذ "scripts" من package.json الخاص بك. أضف السكربت التالي:
{
"name": "quickstart",
"module": "index.ts",
"type": "module",
"private": true,
"scripts": {
"start": "bun run index.ts"
},
"devDependencies": {
"@types/bun": "latest"
},
"peerDependencies": {
"typescript": "^5"
}
}ثم شغّله باستخدام bun run start.
bun run startListening on http://localhost:3000INFO
الأداء — bun run أسرع بحوالي 28 مرة من npm run (6ms مقابل 170ms من النفقات العامة).