Сборка
Виджет собирается Vite 6 в один минифицированный файл bundle.min.js с инлайн-CSS. Конфигурация — в vite.config.js.
Команды
npm start # = vite (dev-сервер, порт 3000)
npm run dev # то же
npm run build # vite build → bundle.min.js
npm run preview # предпросмотр прод-сборкиВыходной бандл
- Входная точка:
index.html→ entrypointsrc/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:
# пер-клиентский бандл в ../../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_MASTER | local | bundler + CLIENT_UUID → пер-клиентский каталог сборки. |
CLIENT_UUID | — | UUID клиента для пути сборки. |
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, режим) живёт поверх этого и меняется без пересборки — см. Темизацию.
Встраивание собранного бандла
<!-- прод -->
<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> — отдельный бандл, готовый к раздаче.