Как скомпилировать приложение Svelte в веб-компонент/ванильный JS, который можно использовать на внешних сайтах?

Около года назад я создал веб-компонент 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

(Вам не нужны три обратных кавычки для встроенного кода, просто используйте один.)

brunnerh 02.04.2024 12:35
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
315
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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, которая пуста. Включили изображение структуры папок.

Dally 02.04.2024 14:44

Вы настроили его неправильно, он создает приложение, а не библиотеку компонентов. Вам не нужен статический адаптер. Начните с нового проекта с помощью npm create svelte и обязательно выберите библиотеку компонентов в качестве шаблона. Скрипт сборки, пакеты и другие вещи должны выглядеть совсем по-другому.

brunnerh 02.04.2024 15:27

Итак, это решило проблему, и теперь она почти работает. Я вижу загрузку компонента на простой HTML-странице, но есть несколько проблем. Tailwind не включается, что означает, что никакие стили и изображения, содержащиеся в папке static/images, также не включаются. Наконец, я получаю сгенерированные следующие файлы: components.js, index-bNtX6Oh4.js и components.umd.cjs. Я предполагаю, что мне следует использовать именно этот файл cjs, и есть ли способ получить только один единственный файл js. Спасибо за помощь :)

Dally 02.04.2024 16:58

Создал новый вопрос по проблеме CSS Tailwind, так как считаю, что это единственная оставшаяся проблема: stackoverflow.com/questions/78263069/…

Dally 02.04.2024 19:27

На сайте Tailwind есть конкретные инструкции о том, как интегрировать его в Svelte.

brunnerh 02.04.2024 19:28

Кроме того, перестаньте создавать новые вопросы по всему, вы вообще сначала искали?

brunnerh 02.04.2024 19:31

Я буквально часами искал, но руководств и документов по этой теме мало. Я просмотрел сайт Tailwind, но он все еще не ответил на мой вопрос, почему CSS отсутствует после сборки, поскольку во время разработки он работает нормально.

Dally 02.04.2024 19:41

Другие вопросы по теме