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

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

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

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

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

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

الخيار 3 استخدم التطبيق Rewired – يتيح لك إجراء تغييرات وسهولة التعديلات الصغيرة على تكوين 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"
  }

يجري npm run build:mobile عندما يكون هدف البناء متنقلًا أو npm run build:desktop لنقطة دخول سطح المكتب.