Svelte web components - Экспортируйте класс вместе с компонентами

#javascript #web-component #es6-modules #svelte #custom-element

#javascript #веб-компонент #es6-модули #стройный #пользовательский элемент

Вопрос:

Я начал работать со svelte и создал с его помощью несколько повторно используемых веб-компонентов, но теперь я пытаюсь использовать один из моих классов, который я также создал.

main.ts:

 import MinimalTableManager from './components/MinimalTableManager.svelte';
import MinimalDataTable from './components/MinimalDataTable.svelte';
import {TableSort} from './models/tableSort';

Оба элемента работают просто отлично, когда я тестирую их в своем html:

 <script type="module">
    import * as tm from '/build/bundle.js'; 
    ...
</script>

И моя главная проблема в том, что я хотел бы использовать свой TableSort класс и в коде, но сейчас я не могу его импортировать:

 import {TableSort} from '/build/bundle.js'; 
...
Uncaught SyntaxError: The requested module '/build/bundle.js' does not provide an export named 'TableSort'

rollup.config.js :

 ...
input: 'src/main.ts',
output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
}
...

Это определенно ошибка новичка, но сейчас я понятия не имею, как мне правильно подойти к этому.

1. Есть ли причина, по которой вы импортируете непосредственно из своего пакета, а './models/tableSort' не?

2. Да, я тестирую компонент в моем index.html not in Svelte, потому что я хотел бы использовать его и в других местах.

3. Сможете ли вы опубликовать связанный компонент? Может быть, так оно и скомпилировано

4. Конечно, это bundle.js : pastebin.com/HKfz6G46 а это и есть то самое rollup.config.js : pastebin.com/xMtwp2iv

5. Пакет не имеет экспорта. Возможно , вам придется попробовать другой формат вывода вместо iife .

Ответ №1:

Благодаря @Daniel_Knights я изменил формат вывода на rollup.config.js from iife to es , и теперь он работает просто отлично.