إستخدام صورة من خارج مجلد src في React

هذا قيد خاص أضافه مطورو حزمة create-react-app ويتم تنفيذه في ModuleScopePlugin لضمان بقاء الملفات في src /، ويضمن هذا المكون الإضافي أن الإستيرادات النسبية relative imports من مجلد التطبيق لا تصل إلى خارجه (أي لا يمكن للمشروع في حالة production أن يصل إلى مجلد src لأسباب أمنية)، ومع ذلك يمكنك أن تزيل هذا القيد من خلال إستخدام حزمة react-app-rewired من خلال الخطوات التالية:

تثبيت الحزمة:

npm install react-app-rewired --save-dev

قم بصنع ملف باسم config-overrides.js في مجلد المشروع الرئيسي، وأكتب بداخله:

// نستدعي إضافة ModuleScopePlugin
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

// وهنا نقوم بتعديل الإعدادت وحذفها منها
module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
    return config;
};

عدل على ملف package.json كالتالي:

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test"
}

شغل المشروع للتجربة

npm start

// Build your app
npm run build

بالرغمن من كل الخطوات السابقة إلا أنه لا يجب أن تستورد من المجلد public - حيث سيتم تكرار تلك الملفات في مجلد build وسيكون متاحًا من خلال عنوانين URL مختلفين، مما يؤدي في النهاية إلى تفاقم حجم تنزيل الحزمة. بينما الإستيراد من مجلد src لأفضل وله مميزات أكثر لأن كل شيء يتم حزمه وضغطه من خلال webpack وستكون حينها كل الصور والملفات أكفاءة فضل في التحميل.