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.config.js，在 cmets 中添加了进一步的注释：

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'] }),
    ],
}