إنشاء تطبيق React بنقاط دخول متعددة

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

انظر أيضًا: حزمة تطبيق React مع Gulp

لا يدعم CRA نقاط دخول متعددة ولكن هناك طريقتان لحل هذه المشكلة.

الخيار 1 قم بالإخراج من تطبيق إنشاء React باستخدام npm run eject الأمر وتحديث الإدخال في الداخل webpack.config.js ملف ليشمل نقاط دخول متعددة.

الخيار 2 استخدم أداة إنشاء بديلة مثل Vite.js التي تتضمن دعمًا لنقاط دخول متعددة خارج الصندوق.

الخيار 3 استخدم التطبيق المعاد توصيله – فهو يتيح لك إجراء تغييرات وتعديلات صغيرة بسهولة على تكوين Webpack الافتراضي دون إخراج التطبيق.

الخيار 4 يستخدم REACT_APP متغيرات البيئة لتحديد المكون الهدف ثم استخدام عمليات الاستيراد الديناميكية ES5 لتحميل مكون التطبيق المقابل كما هو موضح في هذا المثال.

نقاط دخول متعددة لإنشاء تطبيق React

إذا كنت تنوي استخدام تكوين تطبيق Create React بدون إخراجه، فإليك حل بديل بسيط سيساعدك على تحديد نقاط إدخال متعددة وسيتم تجميع المخرجات في مجلدات منفصلة.

داخل src المجلد، قم بإنشاء مكونين.

// ./src/Desktop.js
import React from 'react';

const Desktop = () => {
  return <h1>For Desktop</h1>;
};

export default Desktop;

// ./src/Mobile.js
import React from 'react';

const Mobile = () => {
  return <h1>For Mobile</h1>;
};

export default Mobile;

ملف الإدخال الافتراضي index.js يبدو مثل هذا:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

بعد ذلك، قم بتحرير ملف package.json الخاص بك وأضف أوامر، واحدة لكل هدف بناء.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:mobile": "cp src/Mobile.js src/App.js && npm run build && mv build build-mobile",
    "build:desktop": "cp src/Desktop.js src/App.js && npm run build && mv build build-desktop"
  }