Импорт изображения из папки public в create-react-app

Быстрый ответ

Для обхода ограничений импорта в create-react-app, создайте символическую ссылку в директории src, которая будет указывать на нужную вам внешнюю директорию:

ln -s ../path-to-external-directory src/external

Теперь вы сможете импортировать модули так, будто они находятся прямо в src:

import something from 'external/myModule'; // "Смотри, мам, без eject!"

Этот подход позволяет сохранять аккуратность импортов и соответствие требованиям create-react-app, не внося при этом изменений в конфигурацию. Но помните, что символические ссылки могут вызывать проблемы совместимости с некоторыми средствами сборки или системами непрерывной интеграции и доставки (CI/CD).

Вникнем в подробности: Почему появляются эти ограничения?

Почему create-react-app устанавливает такие ограничения? Главная причина – это поддержка прозрачности структуры проекта и гарантия стабильности сборок. Разрешение импортов из любой директории привело бы к проблемам с управлением зависимостями и потенциально к нестабильным сборкам.

Придерживаемся лучших практик

Прежде, чем заморачиваться над настройкой конфигураций или применять eject, рассмотрите следующие разумные рекомендации:

Использование переменных окружения

Управляйте ресурсами через process.env.PUBLIC_URL:

<img src={process.env.PUBLIC_URL + '/img/logo.png'} /> // Все пути ведут в src, верно?

Подробнее об этом расскажет наш спикер на видео

Размещение в директории "src"

Разместите часто используемые модули и ресурсы в папку src, чтобы предотвратить проблемы с компиляцией:

import logo from './images/logo.png'; // "Этому разработчику лайк за использование 'src'!"

Работа с ModuleScopePlugin

Create-react-app ограничивает импорты в src при помощи ModuleScopePlugin. После сопоставления потенциальных рисков можно подумать об его отключении. Инструменты типа react-app-rewired или Craco могут помочь в этом.

// используя react-app-rewired
config.resolve.plugins = config.resolve.plugins.filter(
  (plugin) => !(plugin instanceof ModuleScopePlugin)
);

Однако не забывайте, что отключение этого плагина, фактически, открывает "ящик Пандоры", повышая риск уязвимости вашей директории приложения.

Визуализация

Представьте директорию src как остров в океане файлов, чтобы лучше понять важность "мостов” – импортов:

🏝️ Остров src: [Component.js, Utils.js, Style.css]

Океан: [📁 configs, 📁 scripts, 📁 assets вне src]

При попытке построить мост (импорт) с острова в океан:

Component.js -> 🌉⛔ -> ../configs/settings.js

Результат: Построение моста не удалось! 🚧

Возможные обходные пути:

Использование react-app-alias для создания псевдонимов путей

// jsconfig.json или tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "assets/*": ["../assets/*"] // Пропуск разрешен, проходите.
    }
  }
}

Применение rewire или react-app-rewired для изменения конфигурации

Эти инструменты позволяют модифицировать конфигурацию webpack, предоставляя больше контроля без использования команды eject.

Скрытые подводные камни: Оценка рисков

Использование команды eject в create-react-app

Команда eject дает полный контроль над конфигурациями и настройками, но дорога обратно будет закрыта:

npm run eject // "Приключения ждут!" – Бильбо Бэггинс

Модификация webpack с использованием продвинутых инструментов

Инструменты, такие как react-app-rewired и Craco, позволяют управлять настройками webpack с меньшими рисками, нежели при полной деконструкции настроек:

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.resolve.plugins.forEach((plugin, i) => {
        if (plugin.constructor.name === 'ModuleScopePlugin') {
          delete webpackConfig.resolve.plugins[i]; // "Ваше админские права здесь не действуют!"
        }
      });
      return webpackConfig;
    },
  },
};

Оценка компромиссов

Любые изменения добавят гибкости проекту, но могут затруднить его обновление. Каждое обновление create-react-app может потребовать дополнительных настроек со стороны пользователя. Стоит взвесить: "преимущества против требований обслуживания."

Углубляемся в детали: Документация и сообщество

Изучение полезных материалов и обсуждение вопросов в сообществе поможет вам лучше понимать нюансы и оптимальные практики.

Полезные материалы

1. Структура папок | Create React App – разбираемся со структурой директории src в Create React App.
2. Импорт компонента | Create React App – понимаем модульную область видимости и абсолютные импорты в CRA.
3. Path | Документация Node.js v21.6.1 – официальная документация Node.js по работе с путем к файлам.
4. Javascript – Ограничение импорта из директорий вне src в create-react-app – Stack Overflow – смотрим решения сообщества по обходу ограничений импорта в Create React App.
5. Настройка Create React App | автор: Дрю Гудвин | Medium – изучаем советы по настройке CRA без использования eject.
6. Resolve | Webpack – детальное руководство по настройке Webpack для решения задач кастомизации путей.
7. React-app-rewired – npm – инструмент для настройки CRA без eject и контроля над конфигурацией webpack.