【问题标题】:Svelte web components - Export a class along with the componentsSvelte Web 组件 - 与组件一起导出一个类
【发布时间】:2020-12-09 14:35:25
【问题描述】:

我开始使用 svelte 并用它制作了一些可重用的 Web 组件,但现在我正在尝试使用我创建的类之一。

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'
}
...

这绝对是一个菜鸟的错误,但现在我不知道我应该如何正确地处理它。

【问题讨论】:

  • 您是否有理由直接从捆绑包中导入而不是 './models/tableSort'
  • 是的,我在 index.html 中测试组件,而不是在 Svelte 中,因为我也想在其他地方使用它。
  • 你能发布捆绑的组件吗?可能是它的编译方式
  • 当然,这是bundle.jspastebin.com/HKfz6G46,这是rollup.config.jspastebin.com/xMtwp2iv
  • 捆绑包没有导出。您可能需要尝试使用不同的 output format 而不是 iife

标签: javascript web-component es6-modules svelte custom-element


【解决方案1】:

感谢@Daniel_Knights,我将rollup.config.js 中的输出格式从iife 更改为es,现在它可以正常工作了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-12
    • 1970-01-01
    • 2016-12-04
    • 2021-09-15
    • 1970-01-01
    • 2022-12-31
    相关资源
    最近更新 更多