Как экспортировать указанные c компоненты Svelte как отдельные классы с указанными именами? - PullRequest
Новая
       96

Как экспортировать указанные c компоненты Svelte как отдельные классы с указанными именами?

0 голосов
/ 28 апреля 2020

Если у вас есть приложение JS, которое не использует ESM, CJS, но вместо этого представляет собой просто набор ванильных JS, как экспортировать компоненты Svelte для использования из случайных мест? в приложении? В идеале я хотел бы иметь ванильные JS файлы, которые выглядят следующим образом: 

    import AddressComponent from './AddressComponent.svelte';
    import DifferentComponent from './DifferentComponent.svelte';
    // ... my js app code
    const address = new AddressComponent({target: ...});
    // ... more vanilla JS code
    const address = new DifferentComponent({target: ...});
    // ... more vanilla JS code

Или даже без импорта, которым я могу управлять в виде списка в другом месте для генерации компонентов Svelte, если это необходимо.

Использование накопительного пакета, кажется, единственный способ, которым все работает, указав iife. Тем не менее, это объединяет все мое приложение как IIFE и ломает много кода, переименовывая вещи, а что нет. Кажется, это никак не обойти.

Я получил хорошие скомпилированные компоненты, используя этот метод Экспорт отдельных пользовательских элементов из компонентов Svelte , однако при этом генерируются компоненты esm или cjs svelte , Возможно, есть инструмент для простого преобразования этого формата в vanilla JS? Я безуспешно искал

Я использовал много комбинаций настроек с gulp и rollup вместе без успеха.

1 Ответ

0 голосов
/ 28 апреля 2020

bundle.js, созданный svelte, автоматически экспортирует компонент app root в браузер (если вы не меняете его имя),

вы можете написать в своем bundle.js прямо перед return app; укажите следующую строку:

app.Child = Child // or whatever your component is called

Затем в вашем javascript:

var child = new app.Child({ target: document.body });

с использованием нужных вам реквизитов.

Ваша HTML страница должна в конечном итоге выглядеть следующим образом: 

<script src="public/build/bundle.js"></script>
<link href="public/build/bundle.css" rel='stylesheet'></link>
<script>
var child = new app.Child({ target: document.body });
</script>
...