从 Svelte 组件导出单独的自定义元素

Question

我正在尝试找出是否可以将每个 Svelte 组件导出为单独的自定义元素（带有阴影 DOM）在其自己的 js 文件中（对任何子元素进行导入 - 即依赖项是'包含在同一个文件中）。有可能吗？

谢谢

Answer 1

我假设您使用的是 rollup 和 rollup-plugin-svelte

实现的方法是使用代码拆分。您可以单独定义输入，这将创建单独的输出。您可以使用输出目录，而不是使用文件名输出。

示例：

import svelte from 'rollup-plugin-svelte';

export default [
    {
        input: ['src/main-a.js', 'src/main-b.js'],
        output: {
            dir: 'public/module',
            format: 'es',
            sourcemap: true
        },
        plugins: [svelte()],
        experimentalCodeSplitting: true,
        experimentalDynamicImport: true
    },
];

source/reference/example: https://github.com/Rich-Harris/rollup-svelte-code-splitting

从 Svelte 组件导出单独的自定义元素

Exporting Separate Custom Elements from Svelte Components

svelte

svelte-component