8

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

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

4

2 回答 2

6

只要您拥有对要附加 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

但是，如果您包含多个这样的组件，那么您对如何处理状态有一些限制。

于 2020-04-16T14:01:04.840 回答
1

如果您想要更广泛的兼容性并且只包含带有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，在评论中添加了进一步的注释：

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'] }),
    ],
}
于 2021-03-06T22:47:37.177 回答