تواصل معنا
Webflow Premium Partner إيهاب فايز
العودة لأدوات AI Coding
التطوير والاختبار

Rollup Configuration

هيّئ Rollup لتجميع مكتبات محسّن مع إزالة الكود غير المستخدم وتنسيقات مخرجات متعددة ونظام إضافات غني.

Claude Code Codex Copilot Cursor Windsurf

نظرة عامة

Rollup هو المعيار الذهبي لتجميع مكتبات JavaScript، وينتج مخرجات نظيفة ومحسّنة مع إزالة ممتازة للكود غير المستخدم. بينما يستخدم Vite منه Rollup تحت الغطاء لبناءات الإنتاج، يظل Rollup المستقل الخيار الأول لمؤلفي المكتبات الذين يحتاجون تحكمًا دقيقًا في تنسيقات المخرجات (ESM، CJS، UMD، IIFE) وتكوين الحزمة.

يستطيع وكلاء الذكاء الاصطناعي تهيئة Rollup بإضافات لـ TypeScript (@rollup/plugin-typescript) وحل وحدات Node.js (@rollup/plugin-node-resolve) والتوافق مع CommonJS (@rollup/plugin-commonjs) والمزيد. التهيئة تصريحية وقابلة للتركيب، مما يسهّل على الوكلاء التفكير في خط أنابيب البناء وإضافة أو تعديل الإضافات.

يستطيع وكيل الذكاء الاصطناعي إعداد تهيئات مخرجات متعددة التنسيقات وتهيئة التبعيات الخارجية لتجنب تجميعها وتنفيذ تقسيم الكود للوحدات المحمّلة كسولاً وإنشاء ملفات إعلان TypeScript بجانب الحزمة. تركيز Rollup على إنتاج أصغر مخرجات ممكنة يجعله مثاليًا لحزم NPM.

لمن هذه الأداة؟

  • مؤلفي المكتبات اللي بينشروا حزم NPM بمخرجات ESM و CJS مزدوجة
  • الفرق اللي بتنشئ حزم SDK بتحكم دقيق في التبعيات الخارجية
  • المطورين اللي بيبنوا حزم UMD جاهزة للمتصفح للتوزيع عبر CDN
  • مشرفي المصادر المفتوحة اللي بيحسّنوا حجم الحزمة بإزالة الكود غير المستخدم

التثبيت

إعداد Claude Code
npm install -D rollup @rollup/plugin-typescript @rollup/plugin-node-resolve
Claude Code configures rollup.config.mjs

الإعدادات

// rollup.config.mjs
import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";

export default {
  input: "src/index.ts",
  output: [
    { file: "dist/index.cjs", format: "cjs" },
    { file: "dist/index.mjs", format: "es" },
  ],
  plugins: [resolve(), typescript()],
  external: ["react", "react-dom"],
};