В эти выходные я начал работать над внештатным проектом.
Большая часть работы связана с изменением стиля существующего пользовательского интерфейса.
Приложение написано на React, языке/фреймворке, с которым я знаком. Однако всего за первые несколько часов, которые я провел, сканируя и пытаясь внести небольшие изменения, я столкнулся с технологиями и синтаксисом, с которыми я очень незнаком. Внесение простых изменений занимает ошеломляющее количество времени из-за узловых модулей, задействованных в приложении. Изменение вещей в приложении требует понимания функциональности и многоуровневости этих различных узловых модулей.
Моя первая попытка заменить логотип (просто изменив источник изображения на локальный путь) была встречена следующей ошибкой:
Необработанная ошибка: ошибка синтаксического анализа модуля: непредвиденный символ ‘�’ (1:0)
Вам может потребоваться соответствующий загрузчик для обработки файлов этого типа.
Чтобы исправить это, я столкнулся с «файловым загрузчиком» из веб-пакета — и впервые в своем опыте разработки программного обеспечения был вынужден серьезно взаимодействовать с веб-пакетом и понимать, что он делает.
Что такое вебпак?
Webpack — это сборщик модулей, что в основном означает, что он должен управлять зависимостями вашего приложения «невероятно настраиваемым» способом.
По их собственным словам:
Олдскульные таскраннеры и даже 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 есть несколько основных понятий, с которыми следует ознакомиться, прежде чем пытаться с ним связываться. Они есть:
- Вход
- Вывод
- Погрузчики
- Плагины
- Режим
- Совместимость с браузером
- Окружающая обстановка
Веб-сайт webpack предоставляет отличный обзор каждой концепции.
Текущая точка прогресса
Я потратил несколько часов, пытаясь изменить файл config.js без какого-либо базового понимания того, что такое веб-пакет или его основные функции.
Углубившись в этот пост в блоге, я понял, что час базового чтения и экспериментов с webpack может оказать мне большую услугу с точки зрения лучшего знакомства с обширным ландшафтом кода в репозитории с открытым исходным кодом Spoke.
Это первое, что я сделаю, когда проснусь утром.