Vue Academy · درس

نشر إضافات Vue وكتابة أنواعها

بنية الحزمة، وتوسعة TypeScript لـ ComponentCustomProperties، والتوزيع عبر npm

الدرس 4 من 413 خطوة

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

حزم إضافة لـ npm

لمشاركة إضافة Vue، انشروها بوصفها حزمة npm. يجب أن تعلن الحزمة عن التبعيات الصحيحة، وأن تتضمن build مناسبًا، وأن ترفق أنواع TypeScript، وأن تُنشَر بطريقة صحيحة. يغطي هذا الدرس كل خطوة.

peerDependencies الخاصة بـ Vue

أدرجوا Vue بوصفها peerDependency، لا تبعية عادية. ويضمن ذلك أن يوفّر التطبيق المضيف Vue، فتتجنبون وجود نسختين من Vue في bundle واحد، وهو ما يعطّل التفاعلية.

{
  "name": "vue-toast-kit",
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vue": "^3.4.0"
  }
}

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

ابنوا الحزمة باستخدام وضع المكتبة في Vite. اضبطوا build.lib مع نقطة الدخول والاسم وتنسيقات الإخراج (ES + UMD)، واجعلوا Vue خارج الحزمة.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'VueToastKit',
      fileName: 'index',
      formats: ['es', 'umd']
    }
  }
})

إخراج Vue من الحزمة في rollupOptions

حدّدوا vue بوصفها خارجية، واربطوها بمتغير عام في build بتنسيق UMD، حتى تُستخدم نسخة Vue الخاصة بالمستهلك.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: { vue: 'Vue' }
    }
  }
}

إنشاء تصريحات الأنواع

أرفقوا ملفات .d.ts حتى يحصل المستهلكون على الإكمال التلقائي وفحص الأنواع. استخدموا vite-plugin-dts لإصدار التصريحات أثناء build الخاص بالمكتبة.

import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({ insertTypesEntry: true })
  ]
})

خريطة exports في package.json

وجّهوا المستهلكين إلى الملفات الصحيحة باستخدام الحقل exports، مع إتاحة build بتنسيق ESM وتصريحات الأنواع. اضبطوا type: module للحزم التي تعطي الأولوية لـ ESM.

{
  "type": "module",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

إرفاق توسيع الأنواع

إذا كانت الإضافة تضيف خصائص عامة، مثل this.$toast، فأدرجوا توسيع ComponentCustomProperties في الأنواع المنشورة حتى تتعرّف عليه محررات المستهلكين تلقائيًا.

// src/types.d.ts (included in the build)
import type { ToastService } from './toast'

declare module 'vue' {
  interface ComponentCustomProperties {
    $toast: ToastService
  }
}

export {}

نقطة الدخول العامة

ينبغي أن يصدّر ملف الدخول src/index.ts الإضافة بوصفها التصدير الافتراضي، بالإضافة إلى أي composables ومفاتيح وأنواع يحتاج إليها المستهلكون.

import ToastPlugin from './plugin'
export default ToastPlugin

export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'

حقل files

استخدموا حقل files لنشر ناتج build فقط، مع إبقاء الحزمة صغيرة واستبعاد المصدر والإعدادات.

{
  "files": ["dist"],
  "sideEffects": false
}

النشر باستخدام provenance

انشروا إلى npm باستخدام provenance، الذي يربط الحزمة تشفيريًا بعملية build في CI وبالتزام المصدر. نفّذوا ذلك من CI موثوق، مثل GitHub Actions، مع الصلاحيات المناسبة.

# in CI (GitHub Actions)
npm publish --provenance --access public

# package.json can also set:
# "publishConfig": { "provenance": true }

قائمة التحقق قبل النشر

تحقّقوا قبل النشر من أن Vue هي peer dep، وأن مجلد dist يحتوي على ESM والأنواع، وأن exports يُحلّ بشكل صحيح، وأن الإصدار قد رُقّي، وأن نتيجة dry run تبدو صحيحة.

# inspect what will be published
npm publish --dry-run

# verify the tarball contents
npm pack

اختبار سريع

اختبروا فهمكم لنشر إضافات Vue.

أجب عليها في الدرس التفاعلي

مراجعة

تعلّمتم نشر الإضافات وتحديد أنواعها:

أدرجوا Vue بوصفها peerDependency لتجنّب وجود نسخ متعددة منها
ابنوا باستخدام وضع المكتبة في Vite، مع إخراج Vue من الحزمة
أصدروا ملفات .d.ts باستخدام vite-plugin-dts، وأرفقوا توسيع الأنواع
اضبطوا exports وfiles وtype: module
انشروا باستخدام --provenance من CI موثوق

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

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

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

ماذا ستتعلم في «نشر إضافات Vue وكتابة أنواعها»؟

بنية الحزمة، وتوسعة TypeScript لـ ComponentCustomProperties، والتوزيع عبر npm تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

بنية الإضافات وapp.use()
الخصائص العامة وprovide/inject في الإضافات
مثال على إضافة الإشعارات وToast
نشر إضافات Vue وكتابة أنواعها

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