Около года назад я создал веб-компонент Vue, который можно было бы включить на любой веб-сайт для облегчения платежей Open Banking в Великобритании. У нас даже есть плагины WordPress, Magento и Shopify, использующие этот веб-компонент.
Вы можете проверить, как это работает здесь.
Я воссоздал виджет в Svelte и использовал для его оформления Flowbite Svelte.
Однако я застрял в том, как экспортировать это как веб-компонент или ванильный JS, чтобы его можно было использовать точно так же, как версию Vue — один JS-файл, содержащий весь функционирующий код, включая Flowbite/CSS и все это содержится в ShadowDOM.
Я видел в Интернете противоречивые руководства, где compilerOptions: { customElement: true,}
установлен либо в svelte.config.js
, vite.config.js
, либо в rollup.config.js
.
У меня сложилось впечатление, что сделать что-то подобное в Svelte будет значительно проще по сравнению с Vue, хотя это очень помогло при выполнении этого в Vue.
Кто-то любезно указал мне на этот ответ, но мне трудно заставить его работать по следующим причинам:
dist/index.js
не существуетnpm run build
, он генерирует 4 файла в папке
dist/assets
папка: index-DwmGsLQW.js
,
apexcharts.common.js
и index-uK8bMt0h
index-DwmGsLQW.js
и запустил vite -c vite.js.config.js build
, который сгенерировал components.js
, components.umd.js
и apexcharts.common.js
в
папка dist-js
components.js
на простой HTML-странице приводит к следующей ошибке:
в консоли: Unexpected token 'export' (at app_2.js:113050:1)
Я был бы очень признателен, если бы кто-нибудь указал мне правильное направление, как достичь того, чего я хочу.
Структура проекта
Версия структуры проекта SvelteKit
dist/index.js
не существует
Поскольку вы не используете SveleKit, именно сюда он выводит обработанные компоненты/код (я даже написал об этом в своем ответе: «Эта сборка работает с выходными данными SvelteKit, которые записаны в dist
, и создает отдельный вывод JS в dist-js
» ). Направьте сборку непосредственно на какой-нибудь индексный файл в вашем исходном коде.
Когда я запускаю
npm run build
, он генерирует 4 файла в папкеdist/assets
папка:index-DwmGsLQW.js
,apexcharts.common.js
иindex-uK8bMt0h
Хэш в пути к файлу будет меняться каждый раз, когда изменяется какое-либо содержимое, если что-то вместо этого добавляет версию пакета.
Изменил точку входа на
index-DwmGsLQW.js
и запустилvite -c vite.js.config.js build
, который сгенерировалcomponents.js
,components.umd.js
иapexcharts.common.js
в папкаdist-js
Вам вообще не нужна отдельная сборка (особенно та, которая указывает на файл, который исчезнет при малейшем изменении), если вы не используете SvelteKit/@sveltejs/package
.
Настройте одну сборку lib
, которая указывает непосредственно на ваш исходный код, если вы не собираетесь публиковать компоненты для собственного использования в проектах Svelte.
Использование этого
components.js
на простой HTML-странице приводит к следующей ошибке: в консоли:Unexpected token 'export' (at app_2.js:113050:1)
Это скрипт модуля, поэтому либо используйте версию UMD, либо установите правильный тип. (<script type = "module" ...>
).
Хорошо, я последовал вашему руководству по SvelteKit, но все еще есть несколько проблем. Мне пришлось установить ````@sveltejs/adapter-static``, который теперь строится на build
вместо dist
, что на самом деле не является проблемой. В папке build
у меня есть index.html
, вероятно, потому, что у меня 'build/index.html
в качестве точки входа. Единственный файл index.js
, который есть в этом проекте SvelteKit, — это файл по умолчанию в папке lib
, которая пуста. Включили изображение структуры папок.
Вы настроили его неправильно, он создает приложение, а не библиотеку компонентов. Вам не нужен статический адаптер. Начните с нового проекта с помощью npm create svelte
и обязательно выберите библиотеку компонентов в качестве шаблона. Скрипт сборки, пакеты и другие вещи должны выглядеть совсем по-другому.
Итак, это решило проблему, и теперь она почти работает. Я вижу загрузку компонента на простой HTML-странице, но есть несколько проблем. Tailwind не включается, что означает, что никакие стили и изображения, содержащиеся в папке static/images
, также не включаются. Наконец, я получаю сгенерированные следующие файлы: components.js
, index-bNtX6Oh4.js
и components.umd.cjs
. Я предполагаю, что мне следует использовать именно этот файл cjs
, и есть ли способ получить только один единственный файл js
. Спасибо за помощь :)
Создал новый вопрос по проблеме CSS Tailwind, так как считаю, что это единственная оставшаяся проблема: stackoverflow.com/questions/78263069/…
На сайте Tailwind есть конкретные инструкции о том, как интегрировать его в Svelte.
Кроме того, перестаньте создавать новые вопросы по всему, вы вообще сначала искали?
Я буквально часами искал, но руководств и документов по этой теме мало. Я просмотрел сайт Tailwind, но он все еще не ответил на мой вопрос, почему CSS отсутствует после сборки, поскольку во время разработки он работает нормально.
(Вам не нужны три обратных кавычки для встроенного кода, просто используйте один.)