Vue Academy · درس

إعداد وضع المكتبة في Vite

‏build.lib في vite.config.ts، ونقطة الدخول، والتنسيقات (es/cjs/umd)، والتبعيات الخارجية

إعداد وضع المكتبة في Vite درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

وضع المكتبة

ينشئ وضع المكتبة في Vite حزمة مخصصة لاستيرادها من تطبيقات أخرى بدلًا من تشغيلها كموقع ويب. ويمكنك ضبطه ضمن build.lib في vite.config.ts.

نقطة الدخول

يمثّل ملف entry الواجهة العامة لمكتبتك؛ فهو يعيد تصدير كل مكوّن وأداة مساعدة ينبغي للمستهلكين الوصول إليها.

// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";

ضبط build.lib

وجّه build.lib.entry إلى ذلك الملف، وامنح المكتبة name عامًا (يُستخدم في بناء UMD).

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "MyUiLib"
    }
  }
});

مصفوفة formats

يحدّد formats تنسيقات الوحدات الناتجة. وبالنسبة إلى المكتبات الحديثة، تغطي ["es", "cjs"] حزم ESM والمستهلكين الذين يستخدمون Node/CommonJS.

lib: {
  entry: resolve(__dirname, "src/index.ts"),
  name: "MyUiLib",
  formats: ["es", "cjs"]
}

دالة fileName

يمكن أن يكون fileName دالةً تتلقى التنسيق، مما يتيح لك إنشاء أسماء مختلفة لكل ناتج.

lib: {
  // ...
  fileName: (format) => "my-ui-lib." + format + ".js"
}

لماذا يجب استبعاد Vue

يجب ألّا تضع Vue داخل حزمة مكتبتك؛ فالمستهلك لديه نسخة منها مسبقًا. يؤدي تضمينها إلى تكرار Vue وتعطيل التفاعلية. لذا اجعلها خارجية.

rollupOptions.external

ضمن build.rollupOptions، أدرج vue في external لتبقى عملية استيراد في الناتج بدلًا من تضمينها مباشرة.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ["vue"]
  }
}

output.globals لـ UMD

إذا أصدرت أيضًا بناء UMD، فسيحتاج المتصفح إلى معرفة اسم المتغير العام لكل تبعية خارجية. اربط vue بالمتغير العام Vue.

rollupOptions: {
  external: ["vue"],
  output: {
    globals: { vue: "Vue" }
  }
}

استبعاد التبعيات النظيرة

ينبغي أيضًا استبعاد أي تبعية نظيرة (مثل مجموعات الأيقونات ومكتبات الأدوات التي يثبتها المستهلك مسبقًا) بدلًا من تضمينها في الحزمة.

external: ["vue", "vue-router", "@vueuse/core"]

البناء

شغّل عملية البناء لإخراج التنسيقات المضبوطة إلى dist. ويظل مسار الإضافات نفسه (vue وvueJsx) مطبقًا على الملفات المصدرية.

npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.js

إبقاء CSS منفصلًا

يمكن إخراج أنماط المكوّنات في ملف CSS منفصل يستورده المستهلكون، مما يحافظ على خفة حزمة JavaScript ويتيح لهم التحكم في تضمين الأنماط.

// consumer side
import "my-ui-lib/dist/style.css";

تحقق سريع

لماذا ندرج vue في rollupOptions.external عند بناء مكتبة Vue؟

مراجعة

يُضبط وضع مكتبة Vite ضمن build.lib باستخدام ملف entry للتجميع، وname، ومصفوفة formats (es وcjs)، ودالة fileName. استبعد vue (والتبعيات النظيرة) عبر rollupOptions.external، واربط المتغيرات العامة لبناء UMD باستخدام output.globals حتى يوفّر المستهلك Vue.

الأسئلة الشائعة

هل درس «إعداد وضع المكتبة في Vite» مجاني؟

نعم — نص درس «إعداد وضع المكتبة في Vite» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد وضع المكتبة في Vite»؟

‏build.lib في vite.config.ts، ونقطة الدخول، والتنسيقات (es/cjs/umd)، والتبعيات الخارجية تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إعداد وضع المكتبة في Vite»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy