8

私はいくつかのプロジェクトを持つグループで働いており、それぞれが異なるフレームワークで書かれています。動作と外観が標準で、どのシステムでも使用できる自己完結型のウィジェットが必要です。フロントエンドにフレームワークを追加する必要がないため、Svelte は良い選択肢のように思えました。しかし、Svelte が他のシステム内で使用可能であると言うものは見つかりません。Svelte コンポーネントを使用するには、すべて Svelte アプリである必要があります。

あれは正しいですか？または、Svelte コンポーネントを別のシステムに埋め込む方法はありますか?

4

2 に答える 2

1

さらに広い互換性が必要で、コンポーネントにscriptタグを含めるだけの場合は、document.currentScriptプロパティを使用して、rollup.js または webpack を使用して Javascript をスタンドアロン スクリプトにコンパイルできます。

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 に答える