أساسيات Vite و esbuild و SWC و Rollup
تعرّف على أدوات التجميع الشائعة (Vite و esbuild و SWC و Rollup) وكيفية تفاعلها مع مشاريع TypeScript.
أساسيات Vite و esbuild و SWC و Rollup درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
مقدمة
الهدف: استكشاف أدوات التجميع الشائعة—Vite وesbuild وSWC وRollup. يوفّر كل منها سرعة ومرونة مميزتين.
Vite
Vite: خادم تطوير فوري يستخدم ESM، مع HMR سريع، وعمليات بناء للإنتاج مدعومة بواسطة Rollup.
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}esbuild
esbuild: أداة تجميع فائقة السرعة مكتوبة بلغة Go. وهي مناسبة جدًا للنمذجة الأولية ومشروعات JS/TS.
// Command
npx esbuild src/index.ts --bundle --outfile=out.jsSWC
SWC: مترجم قائم على Rust للغةَي TS وJS. ويُستخدم غالبًا في Next.js لتحقيق السرعة.
// swc config (.swcrc)
{
"jsc": {
"parser": { "syntax": "typescript" },
"target": "es2020"
}
}Rollup
Rollup: أداة تجميع مرنة تتميز بقدرة قوية على tree-shaking. ويستخدم Vite أداة Rollup داخليًا لعمليات البناء.
// rollup.config.js
import typescript from "@rollup/plugin-typescript";
export default {
input: "src/index.ts",
output: { file: "bundle.js", format: "cjs" },
plugins: [typescript()]
};اختيار أداة التجميع
الاختيار: استخدم Vite لتحسين تجربة التطوير، وesbuild للسرعة، وSWC للترجمة القائمة على Rust، وRollup للتحكم. تتكامل جميعها بسهولة مع TS.
سؤال
تحقق سريع: أي أداة تجميع تستخدم وحدات ES الأصلية لتوفير خادم تطوير سريع؟
مراجعة
مراجعة: يتميز Vite بسرعة ESM، وesbuild بسرعة Go، وSWC بسرعة Rust، بينما يتميز Rollup بالمرونة. استخدم الأداة وفقًا لاحتياجات المشروع.
الأسئلة الشائعة
هل درس «أساسيات Vite و esbuild و SWC و Rollup» مجاني؟
نعم — نص درس «أساسيات Vite و esbuild و SWC و Rollup» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
ماذا ستتعلم في «أساسيات Vite و esbuild و SWC و Rollup»؟
تعرّف على أدوات التجميع الشائعة (Vite و esbuild و SWC و Rollup) وكيفية تفاعلها مع مشاريع TypeScript. تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «أساسيات Vite و esbuild و SWC و Rollup»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إخراج tsc مقابل noEmit وأدوات التجميع
- أساسيات Vite و esbuild و SWC و Rollup
- التصريحات وخرائط المصدر وتصدير الأنواع