اذهب إلى المحتوى
  • 0

جعل مكونات react على شكل حزمة npm ونشرها

Rayden Storm

السؤال

أنا اتساءل عن كيفية نشر حزمة npm تحتوي على مكونات react يمكن استيرادها من الحزمة فمثلا لدي مكون يحتوي على زر معدل 

import React from 'react';

export default function Button(props) {
  return <button style={{ backgroundColor: 'blue', color: 'white' }}>{props.children}</button>;
}

كيف أصنع منه حزمة أنشرها ليمكن للأخرين تثبيتها 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لعملية نشر حزمة خاصه بك على npm 
لابد من خطوتين
1- انشاء الحزمه 
2- نشر الحزمه على npm

عن طريق الخطوات التاليه:

1- أن تقوم بإنشاء حساب على npmjs 
2- من خلال الطرفيه (Terminal) لابد من تسجيل الدخول بالحساب عن طريق الأمر التالي:

npm login

بعد ذلك تقوم بإدخال البيانات 
username
password 
Email

3- بعد ذلك  قم بالذهاب الى الفولدر الذي يحتوي على الملفات التي تريد تحويلها الى حزمه 
باستخدام الأمر التالي 

cd Folder/packageFolder

مع مراعاة كتابة اسم المجلد الموجود فيه الملفات الخاصه بك 

4-  استخدام الأمر التالي:

npm init 

هذا الأمر سوف يقوم بإنشاء ملف package.json قم بإدخال البيانات الخاصه بالحزمه الخاصه بك 
والخطوه الأخيره لنشر الحزمه استخدم الأمر التالي: 

npm publish 

ومبارك عليك تم نشر الحزمه الخاصه بك. 

لابد أن تأخذ في الحسبان أن إسم الحزمه فريد وغير موجود قبل ذلك على npm.

تم التعديل في بواسطة Abdullah Muhammad
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الخطوات الرئيسية: 

  1. يكون لديك مكون React لكي تقوم بتحويله كالذي بالمثال
  2. يكون لديك babel إلى node_module لأنك يجب أن تقوم بتحويل React Component إلى جافا سكربت 
  3. تكتب script يقوم بتصدير الجزء الذي قمت بمعالجته إلى جافاسكربت 
  4. تقوم بتحويل private إلى false في ملف ال package.json
  5. قد تحتاج لأن تشير إلى الملف  الذي ستستخدمه ك entrypoint في الpackage الخاصة بك ويكون عن  طريق 
    "main": "المسار للملف النهائي",

     

  6. تقوم بإنشاء حساب على npm هنا

  7. تقوم بالدخول على الحساب عن طريق npm login

  8. تقوم برفع التعديلات 

  • التطبيق بالتفصيل من هنا 
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...