Блог

Я создал тему gatsby. В этой теме я хочу добавить все компоненты, которые могут использоваться пользователем темы. Это означает, что если пользователь импортирует мою тему в gatsby, он может выбрать через /data/config.yml , какие компоненты (например, ImageGallery, карты, слайдер) следует использовать на его странице Gatsby. Импорт будет генерироваться динамически во время сборки.

Я не углубляюсь в техническую реализацию этого, это только для того, чтобы дать вам некоторую информацию о следующем вопросе.

Чтобы пользователь мог выбирать только те компоненты, которые ему нужны, я должен объединить все компоненты в поставляемую тему. Допустим, пользователь не хочет использовать Map компонент на своей Странице, поэтому он не настраивает его на своей config.yml … и, по крайней мере, ни на одной из страниц gatsby вообще не будет import Map from '...' .

НО, похоже, что gatsby объединяет ВСЕ компоненты в производственную сборку, которые отображаются в структуре каталогов!

Почему я могу это сказать?

У меня был модуль карты, который был заменен другим. Поэтому я сохраняю Map.js в своей папке /Components, но полностью удаляю leaflet пакеты из своего package.json (даже если Map.js требуется брошюра)

Я подумал: «нет места, куда я импортировал Map.js , поэтому gatsby / webpack не распознает компонент и не нуждается в его сборке». Но в любом случае, при выполнении gatsby develop или gatsby build я получил эту ошибку:

Это заставляет меня осознавать, что gatsby / webpack, похоже, анализирует каждый компонент, независимо от того, ссылается он на import или нет.

Вопросы:

Есть ли какой-либо способ архивировать, чтобы в процессе сборки выполнялись только те компоненты, которые действительно импортированы в исходный код?

Хорошо, я понял это. По крайней мере, это было отсутствие поведения на протяжении всего процесса сборки webpack / gatsby.

Сначала я должен увидеть, что существует два процесса сборки:

1. мой gatsby-theme
2. страница, которая включает мой gatsby-theme

Поскольку ошибка появляется при сборке gatsby-theme , ошибка появляется с webpack. Webpack анализирует каждый файл и пытается сгенерировать из него рабочие файлы. Если отсутствуют зависимости (как описано выше), он останавливается с ошибкой.

Итак, если я верну пакеты-листовки в package.json из gatsby-theme и свяжу его, все будет работать гладко, как и ожидалось.

Но если я импортирую это gatsby-theme в качестве основы моего site проекта, будет ли это связывать листовку в файлах сборки, даже если она не используется?

НЕТ

Причина в том, что если я запускаю gatsby build свой site проект, процесс сборки распознает, какие компоненты действительно используются gatsby. И поскольку Map модуль больше не используется, он не будет помещен в производственный код.