دليل شامل: كيفية إنشاء ونشر مكتبة مكونات Vue احترافية

أصبحت مكتبات المكونات (Component Libraries) محور اهتمام المطورين في الآونة الأخيرة، وذلك لدورها المحوري في تبسيط عملية الحفاظ على مظهر وتجربة مستخدم متسقة عبر التطبيقات المختلفة. على الرغم من أنني استخدمت العديد من هذه المكتبات في مسيرتي المهنية، إلا أن استخدام المكتبة يختلف تمامًا عن فهم آليات بنائها من الألف إلى الياء. رغبت في التعمق أكثر في كيفية بناء مكتبة مكونات احترافية، ويسعدني أن أشارككم هذا الفهم لتمكينكم من اكتساب رؤية أعمق في هذا المجال.

لإنشاء مكتبة المكونات في هذا الدليل، سنعتمد على حزمة vue-sfc-rollup المتوفرة عبر npm. تُعد هذه الحزمة أداة قيمة للغاية عند الشروع في بناء مكتبة مكونات جديدة. إذا كنت تمتلك مكتبة قائمة وترغب في الاستفادة من هذه الأداة، يُرجى الرجوع إلى الوثائق الرسمية للحزمة.

ملاحظة هامة (تحديث مايو 2023): تُعتبر حزمة vue-sfc-rollup الآن مهملة (deprecated). البديل الموصى به حاليًا هو Vite، وتحديدًا تكوين “بناء المكتبة” (library build configuration). يمكنكم متابعة هذا المقال لأغراض التعلم والممارسة، ولكن للحصول على أحدث الطرق، يمكنكم الاطلاع على النسخة المحدثة من هذا الدليل التي تستخدم Vite.

تقوم حزمة vue-sfc-rollup بإنشاء مجموعة أساسية من الملفات اللازمة لبدء مشروعك. كما هو موضح في وثائقها، تتضمن هذه الملفات ما يلي (حيث SFC تعني “مكون الملف الواحد” – Single File Component):

• تكوين rollup بسيط.
• ملف package.json مُعد مسبقًا مع سكربتات البناء (build) والتطوير (dev) والتبعيات اللازمة.
• ملفا babel.config.js و .browserslistrc بسيطين لعملية التحويل البرمجي (transpiling).
• غلاف (wrapper) يستخدمه rollup عند تجميع مكونات الملف الواحد (SFCs) الخاصة بك.
• مكون SFC نموذجي لبدء عملية التطوير.
• ملف استخدام نموذجي يمكن الاستفادة منه لتحميل واختبار مكوناتك أو مكتبتك أثناء مرحلة التطوير.

تدعم هذه الأداة كلاً من مكونات الملف الواحد ومكتبة كاملة من المكونات. من المهم الإشارة إلى هذه الجملة من الوثائق: “في وضع المكتبة (library mode)، يوجد أيضًا ‘فهرس’ (index) يُعلن عن المكونات المكشوفة كجزء من مكتبتك.” هذا يعني ببساطة أنه سيتم إنشاء بعض الملفات الإضافية خلال عملية الإعداد الأولية للمشروع.

لنبدأ بناء مكتبة مكونات Vue الخاصة بك

الخطوة الأولى تتمثل في تثبيت حزمة vue-sfc-rollup بشكل عام (globally) على نظامك. افتح سطر الأوامر (terminal) ونفّذ الأمر التالي:

npm install -g vue-sfc-rollup

بعد اكتمال التثبيت العام، انتقل إلى الدليل الذي ترغب في إنشاء مشروع مكتبة المكونات فيه. بمجرد دخولك إلى هذا المجلد، قم بتشغيل الأمر التالي لتهيئة المشروع:

sfc-init

ستظهر لك بعض المطالبات (prompts) في سطر الأوامر. اختر الخيارات التالية:

• هل هذا مكون واحد أم مكتبة؟ (Is this a single component or a library?) اختر: Library (مكتبة).
• ما هو اسم npm لمكتبتك؟ (What is the npm name of your library?) يجب أن يكون هذا الاسم فريدًا على npm. (كمثال، استخدم الكاتب brian-component-lib).
• هل ستُكتب هذه المكتبة بلغة JavaScript أم TypeScript؟ (Will this library be written in JavaScript or TypeScript?) اختر: JavaScript (يمكنك استخدام TypeScript إذا كنت على دراية بها).
• أدخل موقعًا لحفظ ملفات المكتبة: (Enter a location to save the library files:) هذا هو اسم المجلد الذي ترغب أن تحمله مكتبتك. سيتم تعيينه افتراضيًا لاسم npm الذي قدمته أعلاه، لذا يمكنك ببساطة الضغط على Enter.

بعد اكتمال الإعداد، انتقل إلى المجلد الخاص بمشروعك وقم بتشغيل أمر تثبيت التبعيات (dependencies):

cd path/to/my-component-or-lib
npm install

بمجرد الانتهاء، يمكنك فتح المجلد في محرر الأكواد المفضل لديك. كما ذكرنا سابقًا، يتم إنشاء مكون Vue نموذجي لنا. يمكنك العثور عليه داخل مجلد /src/lib-components. لمشاهدة كيف يبدو هذا المكون، يمكنك تشغيل الأمر npm run serve ثم الانتقال إلى العنوان http://localhost:8080/ في متصفحك.

إضافة مكون مخصص خاص بك

الآن، لنقم بإضافة مكوننا المخصص. أنشئ ملف Vue جديدًا داخل مجلد lib-components. في هذا المثال، سأقوم بمحاكاة زر يستخدم في أقسام مهام freeCodeCamp، لذا سأطلق عليه اسم FccButton.vue.

هذا هو مثال لزر المكون الذي سنقوم ببنائه.

يمكنك نسخ ولصق هذا الكود في ملفك الجديد:

<template>
  <button class="btn-cta">{{ text }}</button>
</template>

<script>
export default {
  name: "FccButton", // vue component name
  props: {
    text: {
      type: String,
      default: "Enter Button Text Here"
    }
  },
  data() {}
};
</script>

<style>
.btn-cta {
  background-color: #d0d0d5;
  border-width: 3px;
  border-color: #1b1b32;
  border-radius: 0;
  border-style: solid;
  color: #1b1b32;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
}

.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
  background-color: #1b1b32;
  border-width: 3px;
  border-color: #000;
  background-image: none;
  color: #f5f6f7;
}
</style>

كما تلاحظ، لدينا قسم القالب (template) الأساسي في الأعلى مع الفئة (class) التي نريدها. ويستخدم أيضًا النص الذي سيمرره المستخدم. داخل وسم <script>، لدينا اسم المكون (Component name) والخصائص (props) التي سيقبلها المكون. في هذه الحالة، توجد خاصية واحدة فقط تسمى text ولها قيمة افتراضية “Enter Button Text Here”. لدينا أيضًا بعض التنسيقات (styling) لإعطائه المظهر الذي نريده.

لمشاهدة كيف يبدو المكون، سنحتاج إلى إضافته إلى ملف index.js الموجود في مجلد lib-components. يجب أن يبدو ملف index.js الخاص بك كالتالي:

/* eslint-disable import/prefer-default-export */
export { default as FccButton } from './FccButton';

ستحتاج أيضًا إلى استيراد المكون إلى ملف serve.vue داخل مجلد dev ليبدو كالتالي:

<script>
import Vue from "vue";
import { FccButton } from "@/entry";

export default Vue.extend({
  name: "ServeDev",
  components: {
    FccButton
  }
});
</script>

<template>
  <div id="app">
    <FccButton />
  </div>
</template>

قد تحتاج إلى تشغيل الأمر npm run serve مرة أخرى لتتمكن من رؤية الزر، ولكن يجب أن يكون مرئيًا عند الانتقال إلى http://localhost:8080/ في متصفحك.

لقد قمنا الآن ببناء المكون الذي أردناه. ستتبع هذه العملية نفسها لأي مكون آخر ترغب في بنائه. فقط تأكد من تصديرها (exporting) في ملف /lib-components/index.js لجعلها متاحة من حزمة npm التي نحن على وشك نشرها.

نشر مكتبة المكونات على NPM

الآن بعد أن أصبحنا جاهزين لنشر المكتبة على NPM، نحتاج إلى المرور بعملية البناء (build process) لتجميعها وتجهيزها للنشر. قبل تشغيل أمر البناء، أوصي بتغيير رقم الإصدار (version number) في ملف package.json إلى 0.0.1، نظرًا لأن هذا هو أول حدث نشر لمكتبتنا. من المستحسن أن تحتوي المكتبة على أكثر من مكون واحد قبل إصدار النسخة “الرسمية” الأولى. يمكنك قراءة المزيد حول الترقيم الدلالي للإصدارات (semantic versioning) هنا.

لتنفيذ عملية البناء، نقوم بتشغيل الأمر التالي:

npm run build

كما توضح الوثائق، يؤدي تشغيل سكربت البناء إلى إنشاء 3 ملفات مجمعة (compiled files) في دليل dist، واحد لكل من الخصائص main و module و unpkg المدرجة في ملف package.json الخاص بك. بمجرد إنشاء هذه الملفات، تكون جاهزًا للانطلاق!

بعد تنفيذ هذا الأمر، أصبحنا مستعدين للنشر على NPM. قبل القيام بذلك، تأكد من أن لديك حسابًا على NPM (يمكنك إنشاء حساب هنا إذا كنت بحاجة لذلك). بعد ذلك، سنحتاج إلى إضافة حسابك إلى سطر الأوامر الخاص بك عن طريق تشغيل:

npm adduser

فهم ملف package.json ودوره في عملية النشر

عندما ننشر على npm، نستخدم ملف package.json للتحكم في الملفات التي سيتم نشرها. إذا نظرت إلى ملف package.json الذي تم إنشاؤه عندما قمنا بإعداد المشروع في البداية، فسترى شيئًا كهذا:

"main": "dist/brian-component-lib.ssr.js",
"browser": "dist/brian-component-lib.esm.js",
"module": "dist/brian-component-lib.esm.js",
"unpkg": "dist/brian-component-lib.min.js",
"files": [
  "dist/*",
  "src/**/*.vue"
],

القسم الموجود تحت files يخبر npm بنشر كل شيء في مجلد dist الخاص بنا، بالإضافة إلى أي ملفات .vue داخل مجلد src. يمكنك تحديث هذا القسم حسب ما تراه مناسبًا، ولكننا سنتركه كما هو لهذا الدليل.

نظرًا لأننا لا نغير أي شيء في ملف package.json، فنحن جاهزون للنشر. للقيام بذلك، نحتاج فقط إلى تشغيل الأمر التالي:

npm publish

تهانينا! لقد قمت الآن بنشر مكتبة مكونات Vue بنجاح. يمكنك زيارة موقع npmjs.com والبحث عنها في السجل (registry).

الخلاصة التقنية

لقد استعرضنا في هذا الدليل الشامل كيفية إنشاء ونشر مكتبة مكونات Vue بدءًا من تهيئة المشروع باستخدام vue-sfc-rollup (مع الإشارة إلى Vite كبديل حديث)، مرورًا بإضافة مكونات مخصصة، وصولاً إلى عملية البناء والنشر على NPM. تكمن القيمة الحقيقية لمكتبات المكونات في تعزيز قابلية إعادة الاستخدام، توحيد التصميم، وتسريع وتيرة التطوير.

على الرغم من أن حزمة vue-sfc-rollup قد أصبحت مهملة، إلا أن فهم آلياتها يوفر أساسًا متينًا لمفاهيم بناء المكتبات التي لا تزال ذات صلة عند استخدام أدوات أحدث مثل Vite. إن القدرة على إنشاء ونشر مكتبات المكونات الخاصة بك تمكّن المطورين من بناء أنظمة تصميم قوية، ومشاركة المكونات بسهولة عبر المشاريع المختلفة، مما يساهم في بناء تطبيقات أكثر كفاءة واستدامة. هذه المهارة أساسية لأي مطور Vue.js يسعى لرفع مستوى احترافيته في بناء واجهات المستخدم.