كيف تصنع مجموعة أدوات "رد الفعل النصية" الخاصة بك.

في الأساس ، البرامج النصية للرد هي ما يدير تطبيقات إنشاء تطبيقات التفاعل. ألا تعرف ما هو تطبيق إنشاء رد فعل؟ إليك تعريف سريع:

"إنشاء React App هو بيئة مريحة لتعلم React ... إنه ينشئ بيئة التطوير الخاصة بك بحيث يمكنك استخدام أحدث ميزات JavaScript ، ويوفر تجربة مطور لطيفة ، ويحسن تطبيقك للإنتاج. ... تحت الغطاء ، يستخدم Babel و Webpack ، لكنك لست بحاجة إلى معرفة أي شيء عنها. "(مأخوذة من مستندات React).

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

مهمتنا

نريد إنشاء حزمة جاهزة للنشر من شأنها أن تبني تطبيقات مستخدمينا حتى يتمكنوا من البدء في التطوير على الفور ، ونسيان تكوين جميع أدوات البناء. بمعنى آخر ، ما نريده هو شيء:

  • يتيح للمستخدم تطوير تطبيقاتهم
  • يتيح للمستخدم بناء نسخة إنتاج تطبيقهم

الريبو النهائي هنا.

المتطلبات الأساسية

أنت تعرف القليل عن Webpack و Babel و Node و Npm / Yarn.

الاتفاقيات

لكي تعمل البرامج النصية الخاصة بنا ، دعونا نجعل بعض الاتفاقيات:

  • نتوقع وجود ملف index.html في جذر مشروع المستخدم
  • نتوقع أيضًا وجود ملف src / client.jsx ، والذي سيكون بمثابة ملف React الرئيسي
  • سيتم إنشاء الحزمة الناتجة إلى dist / directory

هذه هي مطالبنا. الباقي سيكون لنا. يمكننا أن نجعلها قابلة للتهيئة لاحقًا إذا كان ذلك مطلوبًا حقًا ، بالطبع ، ولكن الآن دعونا نضع أولوية للاتفاقية على التكوين. بالمناسبة ، يأخذ تطبيق create-react-app هذه خطوة أخرى إلى أبعد من ذلك وينسخ كل هذه الملفات عند إنشاء ملف تعريف المشروع.

المجمع رمز

نحتاج إلى شيء يتعامل مع عملية الإنشاء ، والتي يمكن أن:

  • تأخذ ملف الإدخال والتعامل مع جميع وارداتها
  • خذ شفرة تستخدم ميزات ES جديدة وتحولها إلى ES5 للحصول على أفضل توافق في المتصفح
  • تحسين وتقليل حزم جافا سكريبت النهائية للحصول على أفضل أداء
  • و اكثر

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

dev.config.js:

const devConfig = دمج ([
  parts.setDevMode ()
  parts.setEntries ({
    العميل: ["@ babel / polyfill" ، PATHS.clientBundleEntry]
  })،
  parts.setOutput (PATHS.outputDirectory)،
  parts.setDevServer ()
  parts.resolveExtensions ([". js" ، ".jsx"]) ،
  parts.transpileJavaScript ()
  parts.handleStaticAssets ( "ثابت /")،
  parts.useHTMLTemplate (PATHS.htmlTemplate)،
  parts.setHotModuleReplacement ()
])؛

أساسا سوف:

  • بدء خادم التطوير
  • إنشاء حزمة مع polyfill وتطبيق المستخدم (PATHS.clientBundleEntry)
  • تحويل ES6 / ES7 إلى ES5 مع بابل
  • استخدام قالب HTML
  • معالجة واردات الأصول الثابتة (svg | png)

يشبه تكوين الإنتاج إلى حد كبير ، ولكن بدلاً من بدء تشغيل خادم التطوير ، فإنه سيتم إنشاء جميع الملفات الثابتة وتحسينها ونسخها إلى dist / directory.

دعنا نلقي نظرة على المسارات.

const appRoot = path.resolve (process.cwd ()) ؛
CON PATHS = {
  appRoot،
  htmlTemplate: path.join (appRoot ، "index.html") ،
  clientBundleEntry: path.join (appRoot ، "src / client.jsx") ،
  outputDirectory: path.join (appRoot ، "dist /") ،
}؛
module.exports = PATHS؛

من المهم ملاحظة أن هذه المسارات تشير إلى دليل تطبيق المستخدم (appRoot). كيف نعرف المسار إلى دليل التطبيق؟ إنه نفس الدليل الذي تم فيه تشغيل البرنامج النصي. يمكننا التحقق من مكان ذلك باستخدام process.cwd (). هذه المسارات هي سبب الاتفاقيات التي قطعناها على أنفسنا.

مخطوطات سطر الأوامر

مثل نصوص التفاعل ، سننشئ واجهة سطر أوامر مشابهة جدًا - "مجموعة أدوات التفاعل" - والتي سيتم تشغيلها لاحقًا بواسطة المستخدم:

"البرامج النصية": {
  "dev": "react-toolkit dev" ، // هذا يدير خادم التطوير
  "build": "build-toolkit build" / / هذا يبني التطبيق
}

لتحقيق ذلك ، نحتاج إلى إضافة حقل "bin" إلى الحزمة. json:

"بن": {
  "مجموعة أدوات التفاعل": "./index.js"
}

التي تخبر Npm لتثبيت index.js كملف قابل للتنفيذ "مجموعة أدوات الرد". لمعرفة المزيد حول هذا الموضوع ، راجع مستندات المنشور القصير هذه والمدونة.

لقد زودنا المستخدم بطريقة لاستخدام مجموعة الأدوات الخاصة بنا. الآن ، الشيء الوحيد المتبقي هو ربط أوامر "dev" و "build" لتشغيل تكوينات Webpack محددة. نحن بحاجة إلى التعامل مع هذا في index.js (نلقي نظرة.)

السطر الأول هو shebang ، والذي يوضح ما الذي يجب أن يفسر الملف (العقدة ، في حالتنا):

#! / usr / bin / env node

الجزء التالي من الكود يحصل على نوع الأمر الذي استدعاه المستخدم:

const [task] = process.argv.slice (2) ؛

process.argv عبارة عن Array حيث يكون العنصر الأول هو المسار إلى العقدة ، والعنصر الثاني هو المسار إلى رمز البرنامج النصي ، والعنصر الثالث هو الأمر "dev" أو "build".

بعد ذلك ، سوف نستخدم عبارة تبديل بسيطة لتشغيل تهيئة بناء محددة عبر تفرخ:

...
  الحالة "ديف": {
    النتيجة = تفرخ.
      "webpack ديف خادم"
      ["- تكوين" ، devConfig ، "- التقدم"] ،
      {stdio: "inherit"}
    )؛
    استراحة؛
  }
...

يعمل هذا على تشغيل عملية غير متزامنة ، مما يعني أن تنفيذ الملف يتوقف حتى تنتهي العملية (إما عن طريق ضرب المستخدم ctrl + c أو بواسطة عملية أخرى.)

أخيرًا ، ننهي تنفيذ ملفنا:

if (result.signal) {
  process.exit (1)؛
}

process.exit (result.status)؛

في النهاية ، كل هذا هو في الواقع نسخة مبسطة من react-scripts.js.

جاهز للنشر

كي تختصر:

  • لقد توصلنا إلى بعض الاتفاقيات حول ما نطلبه من المستخدم
  • أنشأنا تكوينات Webpack لحالتين مختلفتين - التطوير والإنتاج
  • أنشأنا واجهة سطر الأوامر لتشغيل التكوينات لدينا

الحزمة الآن جاهزة للنشر. يمكنك التعرف على كيفية قراءة README لهذا المشروع هنا. بسيط للغاية ، أليس كذلك؟

اختبارات

إذا كنت ترغب في اختباره ، تحقق من إعادة النسخ النهائية للنسخة المكررة واتبع الإرشادات الموجودة في README. لاحظ كيف يكون اختبار التطبيق صغيرًا - لا توجد ملفات تكوين Webpacks أو Babel ، ولا يحتوي package.json إلا على اثنين من التبعيات إلى جانب الرد!

ملخص

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

P.S بفضل سارة كوتز للمراجعة!