Skip to content

Сборка

Виджет собирается Vite 6 в один минифицированный файл bundle.min.js с инлайн-CSS. Конфигурация — в vite.config.js.

Команды

bash
npm start            # = vite (dev-сервер, порт 3000)
npm run dev          # то же
npm run build        # vite build → bundle.min.js
npm run preview      # предпросмотр прод-сборки

Выходной бандл

  • Входная точка: index.html → entrypoint src/index.js.
  • Имя файла: bundle.min.js (entryFileNames), все ассеты инлайнятся (assetFileNames: '[name][extname]', inlineDynamicImports: true).
  • CSS инлайнится в JS через vite-plugin-css-injected-by-js: код стилей кладётся в window.__mzCss, и если определена window.__mzCssReinject(), она вызывается (для повторной инъекции в shadow root). cssCodeSplit: false — никаких отдельных CSS-файлов.
  • Минификация: esbuild.

Куда складывается сборка

УсловиеКаталог
Обычная сборкаbuild/static/js
Пер-клиентская (BUILD_MASTER=bundler CLIENT_UUID=<uuid>)../../build/<CLIENT_UUID>

Параметризация сборки (argv)

vite.config.js парсит аргументы командной строки функцией getArgh:

bash
# пер-клиентский бандл в ../../build/<uuid>
npm run build -- BUILD_MASTER=bundler CLIENT_UUID=e38997d0-f29c-4127-9f15-6b22df37ff10

# build-time опции стиля (компилируются в process.env.STYLE_CONFIG)
npm run build -- BUILD_OPTS='{"msg-animation":"unfurl"}'
АргументПо умолчаниюОписание
BUILD_MASTERlocalbundler + CLIENT_UUID → пер-клиентский каталог сборки.
CLIENT_UUIDUUID клиента для пути сборки.
BUILD_OPTS{"msg-animation":"bubble"}JSON build-time опций стиля → process.env.STYLE_CONFIG.

Слой Sass-темизации (themeVars)

Отдельный от рантайм-темы слой: объект themeVars в vite.config.js пробрасывается в Sass как переменные $G-* (через additionalData). Это build-time палитра (цвета header'а, blob-кнопки, контраст и т.п.), запекаемая в бандл. Рантайм-тема (accent, pattern, режим) живёт поверх этого и меняется без пересборки — см. Темизацию.

Встраивание собранного бандла

html
<!-- прод -->
<script src="./build/static/js/bundle.min.js" defer></script>

Для дев-режима index.html подключает src/index.js как ES-модуль напрямую. Примеры встраивания разных режимов — index.html и embed-test.html в корне репозитория.

Пер-клиентские сборки

Чтобы выпустить бандл с зашитыми дефолтами под конкретного клиента, поменяйте widget.config.js (или передайте VITE_*/BUILD_OPTS) и соберите с BUILD_MASTER=bundler CLIENT_UUID=<uuid>. Результат попадёт в ../../build/<uuid> — отдельный бандл, готовый к раздаче.