بناء واجهة أمامية باستخدام Vite و Bun

NOTE

يمكنك استخدام Vite مع Bun، لكن العديد من المشاريع تحصل على Builds أسرع وتقلل مئات التبعيات عن طريق التبديل إلى [HTML imports](/ar/bundler/html-static).

يعمل Vite مع Bun مباشرة من الصندوق. ابدأ بأحد قوالب Vite.

bash

bun create vite my-app

txt

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /path/to/my-app...

ثم cd إلى دليل المشروع وتثبيت التبعيات.

bash

cd my-app
bun install

ابدأ خادم التطوير مع Vite CLI باستخدام bunx.

العلم --bun يخبر Bun بتشغيل Vite CLI باستخدام bun بدلاً من node؛ بشكل افتراضي يحترم Bun سطر shebang الخاص بـ Vite #!/usr/bin/env node.

bash

bunx --bun vite

لتبسيط هذا الأمر، قم بتحديث نص "dev" في package.json إلى ما يلي.

json

  "scripts": {
    "dev": "vite", 
    "dev": "bunx --bun vite", 
    "build": "vite build",
    "serve": "vite preview"
  },
  // ...

الآن يمكنك بدء خادم التطوير باستخدام bun run dev.

bash

bun run dev

الأمر التالي سيقوم ببناء تطبيقك للإنتاج.

bunx --bun vite build

هذا دليل موجز للبدء مع Vite + Bun. لمزيد من المعلومات، راجع وثائق Vite.