ملاحظة

لا تحتاج إلى bun create لاستخدام Bun. لا تحتاج إلى أي تكوين على الإطلاق. هذا الأمر موجود لجعل البدء أسرع وأسهل قليلاً.

---

أنشئ قالبًا لمشروع Bun جديد مع bun create. هذا أمر مرن يمكن استخدامه لإنشاء مشروع جديد من مكون React، حزمة npm create-<template>، مستودع GitHub، أو قالب محلي.

إذا كنت تبحث عن إنشاء مشروع Bun فارغ جديد تمامًا، استخدم bun init.

من مكون React

bun create ./MyComponent.tsx يحول مكون React موجود إلى بيئة تطوير كاملة مع إعادة التحميل الساخن وبناء الإنتاج في أمر واحد.

$ bun create ./MyComponent.jsx # .tsx مدعوم أيضًا

ملاحظة

🚀 خليفة Create React App — يوفر bun create <component> كل ما أحبه المطورون في Create React App، لكن مع أدوات حديثة، وبناء أسرع، ودعم للخلفية.

كيف يعمل هذا

عند تشغيل bun create <component>، يقوم Bun بـ:

1. استخدام مجمع JavaScript في Bun لتحليل رسم الوحدة النمطية الخاص بك.
2. جمع جميع التبعيات المطلوبة لتشغيل المكون.
3. فحص صادرات نقطة الدخول لمكون React.
4. إنشاء ملف package.json مع التبعيات والسكريبتات المطلوبة لتشغيل المكون.
5. تثبيت أي تبعيات مفقودة باستخدام bun install --only-missing.
6. إنشاء الملفات التالية:
   • ${component}.html
   • ${component}.client.tsx (نقطة الدخول للواجهة الأمامية)
   • ${component}.css (ملف css)
7. بدء خادم تطوير الواجهة الأمامية تلقائيًا.

استخدام TailwindCSS مع Bun

TailwindCSS هي أداة CSS ذات أولوية شائعة للغاية تُستخدم لتصميم تطبيقات الويب.

عند تشغيل bun create <component>، يفحص Bun ملف JSX/TSX الخاص بك لأسماء فئات TailwindCSS (وأي ملفات يستوردها). إذا اكتشف أسماء فئات TailwindCSS، سيضيف التبعيات التالية إلى package.json الخاص بك:

{
  "dependencies": {
    "tailwindcss": "^4",
    "bun-plugin-tailwind": "latest"
  }
}

نقوم أيضًا بتكوين bunfig.toml لاستخدام مكون TailwindCSS في Bun مع Bun.serve()

[serve.static]
plugins = ["bun-plugin-tailwind"]

وملف ${component}.css مع @import "tailwindcss"; في الأعلى:

@import "tailwindcss";

استخدام shadcn/ui مع Bun

shadcn/ui هي أداة مكون شائعة للغاية لبناء تطبيقات الويب.

يفحص bun create <component> أي مكونات shadcn/ui المستوردة من @/components/ui.

إذا وجد أيًا منها، يقوم بتشغيل:

# بافتراض أن bun اكتشف واردات إلى @/components/ui/accordion و @/components/ui/button
bunx shadcn@canary add accordion button # وأي مكونات أخرى

نظرًا لأن shadcn/ui نفسه يستخدم TailwindCSS، يضيف bun create أيضًا تبعيات TailwindCSS الضرورية إلى package.json الخاص بك ويكوّن bunfig.toml لاستخدام مكون TailwindCSS في Bun مع Bun.serve() كما هو موضح أعلاه.

بالإضافة إلى ذلك، نقوم بإعداد ما يلي:

• tsconfig.json لإنشاء اسم مستعار "@/*" إلى "src/*" أو . (اعتمادًا على ما إذا كان هناك دليل src/)
• components.json حتى يعرف shadcn/ui أنه مشروع shadcn/ui
• ملف styles/globals.css الذي يكوّن Tailwind v4 بالطريقة التي يتوقعها shadcn/ui
• ملف ${component}.build.ts الذي يبني المكون للإنتاج مع تكوين bun-plugin-tailwind

bun create ./MyComponent.jsx هي واحدة من أسهل الطرق لتشغيل الكود الذي تم إنشاؤه من LLMs مثل Claude أو ChatGPT محليًا.

من npm

bun create <template> [<destination>]

بافتراض أنه ليس لديك قالب محلي بنفس الاسم، سيقوم هذا الأمر بتنزيل وتنفيذ حزمة create-<template> من npm. الأمران التاليان سيتصرفان بشكل متطابق:

bun create remix
bunx create-remix

راجع توثيق حزمة create-<template> المرتبطة للحصول على التوثيق الكامل وتعليمات الاستخدام.

من GitHub

سيقوم هذا بتنزيل محتويات مستودع GitHub إلى القرص.

bun create <user>/<repo>
bun create github.com/<user>/<repo>

اختياريًا حدد اسمًا لمجلد الوجهة. إذا لم يتم تحديد وجهة، سيتم استخدام اسم المستودع.

bun create <user>/<repo> mydir
bun create github.com/<user>/<repo> mydir

سيقوم Bun بتنفيذ الخطوات التالية:

• تنزيل القالب
• نسخ جميع ملفات القالب إلى مجلد الوجهة
• تثبيت التبعيات مع bun install.
• تهيئة مستودع Git جديد. انسحب مع علم --no-git.
• تشغيل سكريبت start المكوّن للقالب، إذا تم تعريفه.

NOTE

افتراضيًا لن يقوم Bun _بالكتابة فوق_ أي ملفات موجودة. استخدم علم `--force` للكتابة فوق الملفات الموجودة.

من قالب محلي

تحذير

على عكس القوالب البعيدة، فإن تشغيل bun create مع قالب محلي سيحذف مجلد الوجهة بالكامل إذا كان موجودًا بالفعل! كن حذرًا.

يمكن توسيع مُنشئ القوالب في Bun لدعم القوالب المخصصة المحددة على نظام الملفات المحلي. يجب أن تعيش هذه القوالب في أحد المجلدات التالية:

• $HOME/.bun-create/<name>: قوالب عامة
• <project root>/.bun-create/<name>: قوالب خاصة بالمشروع

ملاحظة

يمكنك تخصيص مسار القالب العام بتعيين متغير البيئة BUN_CREATE_DIR.

لإنشاء قالب محلي، انتقل إلى $HOME/.bun-create وأنشئ دليلًا جديدًا بالاسم المطلوب للقالب الخاص بك.

cd $HOME/.bun-create
mkdir foo
cd foo

ثم، أنشئ ملف package.json في ذلك الدليل بالمحتويات التالية:

{
  "name": "foo"
}

يمكنك تشغيل bun create foo في مكان آخر على نظام الملفات الخاص بك للتحقق من أن Bun يجد قالبك المحلي بشكل صحيح.

إعداد المنطق

يمكنك تحديد سكريبتات إعداد ما قبل وبعد التثبيت في قسم "bun-create" من package.json للقالب المحلي الخاص بك.

{
  "name": "@bun-examples/simplereact",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "bun-create": {
    "preinstall": "echo 'Installing...'", // أمر واحد
    "postinstall": ["echo 'Done!'"], // مصفوفة من الأوامر
    "start": "bun run echo 'Hello world!'"
  }
}

الحقول التالية مدعومة. يمكن أن يتوافق كل من هذه مع سلسلة أو مصفوفة من السلاسل. سيتم تنفيذ مصفوفة من الأوامر بالترتيب.

الحقل	الوصف
postinstall	يعمل بعد تثبيت التبعيات
preinstall	يعمل قبل تثبيت التبعيات

بعد استنساخ قالب، سيزيل bun create تلقائيًا قسم "bun-create" من package.json قبل كتابته إلى مجلد الوجهة.

المرجع

أعلام CLI

العلم	الوصف
--force	الكتابة فوق الملفات الموجودة
--no-install	تخطي تثبيت node_modules والمهام
--no-git	لا تهيئة مستودع git
--open	البدء والفتح في المتصفح بعد الانتهاء

متغيرات البيئة

الاسم	الوصف
GITHUB_API_DOMAIN	إذا كنت تستخدم GitHub enterprise أو وكيلًا، يمكنك تخصيص نطاق GitHub الذي يتصل به Bun للتنزيلات
GITHUB_TOKEN (أو GITHUB_ACCESS_TOKEN)	هذا يسمح لـ bun create بالعمل مع المستودعات الخاصة أو إذا تم تقييد المعدل. يتم اختيار GITHUB_TOKEN على GITHUB_ACCESS_TOKEN إذا كان كلاهما موجودًا.

كيف يعمل bun create

عند تشغيل bun create ${template} ${destination}، هذا ما يحدث:

إذا كان قالب بعيد

1. GET registry.npmjs.org/@bun-examples/${template}/latest وتحليله
2. GET registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz
3. فك الضغط واستخراج ${template}-${latestVersion}.tgz إلى ${destination}
   • إذا كانت هناك ملفات ستكتب فوق، تحذير والخروج ما لم يتم تمرير --force

إذا كان مستودع GitHub

1. تنزيل tarball من واجهة برمجة تطبيقات GitHub
2. فك الضغط والاستخراج إلى ${destination}
   • إذا كانت هناك ملفات ستكتب فوق، تحذير والخروج ما لم يتم تمرير --force

وإلا إذا كان قالب محلي

1. فتح مجلد القالب المحلي

2. حذف دليل الوجهة بشكل متكرر

3. نسخ الملفات بشكل متكرر باستخدام أسرع استدعاءات نظام متاحة (على macOS fcopyfile و Linux، copy_file_range). لا تنسخ أو تعبر إلى مجلد node_modules إذا كان موجودًا (هذا وحده يجعله أسرع من cp)

4. تحليل package.json (مرة أخرى!)، تحديث name ليكون ${basename(destination)}، إزالة قسم bun-create من package.json وحفظ package.json المحدث على القرص.

   • إذا تم اكتشاف Next.js، أضف bun-framework-next إلى قائمة التبعيات
   • إذا تم اكتشاف Create React App، أضف نقطة الدخول في /src/index.{js,jsx,ts,tsx} إلى public/index.html
   • إذا تم اكتشاف Relay، أضف bun-macro-relay حتى يعمل Relay

5. الكشف التلقائي عن عميل npm، مفضلًا pnpm، yarn (v1)، وأخيرًا npm

6. تشغيل أي مهام محددة في "bun-create": { "preinstall" } مع عميل npm

7. تشغيل ${npmClient} install ما لم يتم تمرير --no-install أو لا توجد تبعيات في package.json

8. تشغيل أي مهام محددة في "bun-create": { "postinstall" } مع عميل npm

9. تشغيل git init; git add -A .; git commit -am "Initial Commit";

   • إعادة تسمية gitignore إلى .gitignore. يقوم NPM تلقائيًا بإزالة ملفات .gitignore من الظهور في الحزم.
   • إذا كانت هناك تبعيات، يعمل هذا في سلسلة منفصلة بشكل متزامن أثناء تثبيت node_modules
   • استخدام libgit2 إذا كان متاحًا تم اختباره وأداء أبطأ بـ 3 مرات في الاختبارات الدقيقة