问题描述
我试图找出是否可以将每个 Svelte 组件作为单独的自定义元素(带有 Shadow DOM)导出到它自己的 js 文件中(带有任何子元素的导入 - 即依赖项不包含在同一个文件中)文件).甚至有可能吗?
I'm trying to find out if it's possible to export each Svelte component as a separate Custom Element (with Shadow DOM) in its own js file (with imports for any child elements - i.e. dependencies aren't included in the same file). Is it even possible?
谢谢
推荐答案
我假设你正在使用 rollup
和 rollup-plugin-svelte
I'm assuming you're using rollup
and rollup-plugin-svelte
这样做的方法是使用代码拆分.您可以单独定义输入,这将创建单独的输出.您可以使用输出目录,而不是使用文件名输出.
the way to do it is to use code splitting. You can define the inputs separately and that will create individual outputs. Instead of using a file name output, you would use an output dir.
示例:
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
},
];
源/参考/示例:https://github.com/Rich-Harris/rollup-svelte-code-splitting
这篇关于从 Svelte 组件导出单独的自定义元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!