كيفية إنشاء مكون React ونشره على NPM

كنت أفكر في القيام بنوع من التنفيس قبل بدء هذه القصة ، ولكن ، دعنا نذهب إلى الحلول. التنفيس ليس ضرورياً بعد الآن لأنه تم إنشاء بديل Redux بدون تعقيد: D

Pttsss! لا تنس قراءة مقالة "رد الفعل الشرطي" (قراءة دقيقة واحدة)

التحديث لعام 2018: بالنسبة لأي شخص آخر يواجه أخطاء ، كان Webpack يشتكي من بناء جملة jsx مع رمز غير متوقع ، ثم ، يرجى التحقق من تعليق كريس هذا

إذا كنت ترغب في إنشاء مكون React ونشره في NPM ، فعليك القيام بأمرين:

• إنشاء المكون
• قم بإنشاء مشروع حيث ستختبر مكونك

خلق المكون

دعنا نفترض أن مكوننا سوف يطلق عليه عنصر رد الفعل

ثم ، يدوياً ، قم بإنشاء هذه الملفات:

.babelrc

webpack.config.js

package.json (لا تنسَ تغيير الاسم في هذا الملف)

دعنا نواصل تشغيل الأشياء:

سيتم استخدام رابط npm لتطوير مكوننا في مشروع الاختبار أثناء تطويره.

ثم قم بإنشاء المكون الخاص بك في / src/index.js

لنجرب هذا المثال. قم بإنشاء هذا الملف:

SRC / index.js

منجز! انتهى لدينا مكون يتوهم!

إنشاء مشروع الاختبار لدينا

الآن ، دعونا ننشئ مشروعًا أساسيًا حقًا لاختبار مكوناتنا الفخمة.

بعد ذلك ، دعونا نقوم بتعديل ملف src / App.js الخاص بنا بإضافة الاستيراد واستخدام المكون. لذلك ، يجب عليك إضافة هذين الخطين:

استيراد يتوهم من "رد فعل يتوهم مكون" ؛

<يتوهم />

يجب أن يبدو src / App.js كما يلي:

ثم ، أخيرًا ، ابدأ تشغيل npm وشاهد ما هو المكون الهائل الذي أنشأته للتو! حصلت عليه يا رجل!

يجب أن تبدو هذه

كخطوة أخيرة ، دعونا ننشر مكوننا.

كخطوة أولى ، من فضلك ، انتقل إلى مجلد المكون الخاص بك (react-fancy-component) وأضف جميع البيانات التي يجب عليك إضافتها في ملف package.json ، مثل الاسم والإصدار والوصف والمؤلف.

بعد ذلك ، في مجلد المكون ، دعونا نقوم بتهيئة npm لنشر المكون الخاص بك (تذكر أنك بحاجة إلى حساب في http://npmjs.com/. لا تقلق ، إنه مجاني ... الآن ...).

ما عليك القيام به ، هو تشغيل تسجيل دخول npm ووضع اسم المستخدم وكلمة المرور والبريد الإلكتروني العام.

بعد ذلك ، قم بتشغيل نشر npm و ... هذا كل شيء!

تحقق من هذا الرجل: https://www.npmjs.com/package/react-fancy-component

سو الهوى!

والسحر؟ أين السحر؟

السحر في سطرين في المشروع بأكمله. كلا الخطين داخل ملف webpack.config.json.

• libraryTarget: 'commonjs2': يقول هذا السطر "مهلا ، يجب أن يكون ناتجنا وحدة قابلة للتصدير!". تحقق المزيد من المعلومات في الوثائق الرسمية.
• externals: {'react': 'commonjs react'}: يقول هذا السطر "مرحبًا ، دعنا نستخدم تبعية React التي تستخدم من يستخدمني!". كن حذرا مع عدم التوافق الإصدار.

ماذا عن وقت التطوير؟

لديك لتشغيل npm start في محطتين مختلفتين. محطة واحدة في مجلد المكون ، وآخر في مجلد اختبار المشروع.

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

ماذا عن الموسيقى؟

هنا ، الرجل الهوى: