Svelte 组件可以嵌入到非 Svelte 应用程序中吗？

Question

我在一个有几个项目的小组工作，每个项目都是用不同的框架编写的。我们希望有一些独立的小部件，其行为和外观是标准的，但可以在任何系统中使用。我认为 Svelte 听起来是个不错的选择，因为它不需要在前端添加框架。但我找不到任何说明 Svelte 可在其他系统中使用的信息；它必须是一个全 Svelte 应用程序才能拥有 Svelte 组件。

对吗？或者有什么方法可以将 Svelte 组件嵌入到另一个系统中吗？

Answer 1

只要引用了要附加 Svelte 组件的 DOM 元素，就可以在任何地方包含 Svelte 组件。

const container = document.querySelector('.container');

//MyComponent is the compiled component
new MyComponent({
  target : container
});

见https://svelte.dev/docs#Client-side_component_API

但是，如果包含多个组件，那么您在处理状态方面会有一些限制。

Answer 2

如果你想要更广泛的兼容性并且只包含带有 script 标签的组件，你可以使用 document.currentScript 属性并将 Javascript 编译成独立脚本使用 rollup.js 或 webpack:

import MyComponent from './MyComponent.svelte';

var div = document.createElement('DIV');
var script = document.currentScript;
script.parentNode.insertBefore(div, script);

const myComponent = new MyComponent({
    target: div,
    props: { propname: 'some value' },
});

如果您的项目中安装了 rollup-plugin-svelte 和 @rollup/plugin-node-resolve 包，您可以使用 rollup 编译一个不错的包。下面是一个合适的rollup.config.js，在评论中添加了进一步的注释：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';

export default {
    input: 'embed.js',
    output: {
        format: 'iife',
        file: 'dist.js',
    sourcemap: false,
    },
    plugins: [
        svelte({ emitCss: false, }),
        resolve({ browser: true, dedupe: ['svelte'] }),
    ],
}

Svelte 组件可以嵌入到非 Svelte 应用程序中吗？

Can a Svelte component be embedded in a non-Svelte app?

embed

svelte

svelte-component