В эти выходные я начал работать над внештатным проектом.

Большая часть работы связана с изменением стиля существующего пользовательского интерфейса.

Приложение написано на React, языке/фреймворке, с которым я знаком. Однако всего за первые несколько часов, которые я провел, сканируя и пытаясь внести небольшие изменения, я столкнулся с технологиями и синтаксисом, с которыми я очень незнаком. Внесение простых изменений занимает ошеломляющее количество времени из-за узловых модулей, задействованных в приложении. Изменение вещей в приложении требует понимания функциональности и многоуровневости этих различных узловых модулей.

Моя первая попытка заменить логотип (просто изменив источник изображения на локальный путь) была встречена следующей ошибкой:

Необработанная ошибка: ошибка синтаксического анализа модуля: непредвиденный символ ‘�’ (1:0)
Вам может потребоваться соответствующий загрузчик для обработки файлов этого типа.

Чтобы исправить это, я столкнулся с «файловым загрузчиком» из веб-пакета — и впервые в своем опыте разработки программного обеспечения был вынужден серьезно взаимодействовать с веб-пакетом и понимать, что он делает.

Что такое вебпак?

Webpack — это сборщик модулей, что в основном означает, что он должен управлять зависимостями вашего приложения «невероятно настраиваемым» способом.

Веб-сайт веб-пакета описывает эволюцию модульного кода с первых дней существования Javascript до настоящего момента, когда появился веб-пакет.

По их собственным словам:

Олдскульные таскраннеры и даже Google Closure Compiler требуют, чтобы вы заранее вручную объявляли все зависимости. В то время как упаковщики, такие как webpack, автоматически создают и выводят ваш граф зависимостей на основе того, что импортируется и экспортируется.

Было бы неплохо… иметь что-то, что позволит нам не только писать модули, но и поддерживать любой формат модуля (по крайней мере, пока мы не доберемся до ESM) и одновременно обрабатывать ресурсы и активы?

Вот почему существует веб-пакет. Это инструмент, который позволяет вам объединять ваши приложения JavaScript (поддерживающие как ESM, так и CommonJS), и его можно расширить для поддержки множества различных ресурсов, таких как изображения, шрифты и таблицы стилей.

Файл config.js веб-пакета

Здесь я полностью застрял, пытаясь заменить источник URL-изображения локальным изображением в папке:

From: ‹img src="https://s3-us-west-1.amazonaws.com/spoke-public/spoke_logo.svg" className={css(styles.logoImg)} /›

Кому: ‹img src={logo} className={css(styles.logoImg)} /›

После импорта логотипа следующим образом:

импортировать логотип из «../Images/red.png»

Однако неоднократно моя консоль продолжала выдавать мне ошибку, о которой я упоминал в начале этого блога, то есть мне требовался «подходящий загрузчик».

Исследования привели меня к выводу о необходимости использования загрузчика файлов (учитывая, что я уже понял, что в структуре приложения используется веб-пакет).

Но даже после выполнения инструкций по ссылке выше и внесения всех необходимых изменений в файл config.js я продолжал получать ошибки в своей консоли. На самом деле все мое приложение разбилось из-за ошибки «отсутствует index.js» в консоли.

Элементы файла config.js

В файле config.js есть несколько основных понятий, с которыми следует ознакомиться, прежде чем пытаться с ним связываться. Они есть:

  1. Вход
  2. Вывод
  3. Погрузчики
  4. Плагины
  5. Режим
  6. Совместимость с браузером
  7. Окружающая обстановка

Веб-сайт webpack предоставляет отличный обзор каждой концепции.

Текущая точка прогресса

Я потратил несколько часов, пытаясь изменить файл config.js без какого-либо базового понимания того, что такое веб-пакет или его основные функции.

Углубившись в этот пост в блоге, я понял, что час базового чтения и экспериментов с webpack может оказать мне большую услугу с точки зрения лучшего знакомства с обширным ландшафтом кода в репозитории с открытым исходным кодом Spoke.

Это первое, что я сделаю, когда проснусь утром.