كيفية إنشاء مكون 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 التي لدينا في مشروع الاختبار لدينا التغيير ، وإعادة ترجمة مشروع الاختبار الخاص بنا. سترى تغييراتك في متصفحك.
ماذا عن الموسيقى؟
هنا ، الرجل الهوى: