如何在运行时将编译的svelte-component/-apps导入到svelte-app中

Question

是否可以动态导入预编译的svelte组件或整个svelte应用程序。

我在svelte3中找到了这种方法，但在文档中什么也没有找到：https://github.com/sveltejs/svelte/issues/1576

我想在一个页面上组合几个独立的(托管的) Svelte应用程序到一个更大的svelte-app (微前端)。目标是，每个子应用程序都可以在任何地方独立部署和托管(可能是自己的docker容器)。并且任何更改都应该在聚合器应用程序中可见，而无需重新编译它。

我想我想做这样的事情：https://single-spa.js.org/docs/separating-applications.html，但没有其他框架，这会毁了我的应用程序和组件。

我不想使用自定义组件，因为Shadow DOM的样式不灵活。我必须能够改变css在一个全局样式表。

有谁有主意吗？

谢谢您:)

Answer 1

你可以看看Ara Framework。它有一个名为Nova Bridge的独立组件。

这种方法由一个组件组成，该组件呈现一个将被挂载的占位符微前端视图。然后，该组件发出一个名为NovaMount的DOM事件，微前端的JavaScript包将侦听该事件，以在运行时呈现并挂载它。

下面是微前端的入口点示例。

import { mountComponent, load, loadById } from 'hypernova-svelte'

import Example from './components/Example.svelte'

const render = (name, { node, data }) => {
  if (name === 'Example') {
    return mountComponent(Example, node, data)
  }
}

document.addEventListener('NovaMount', ({ detail }) => {
  const { name, id } = detail

  const payload = loadById(name, id)

  if (payload) {
    render(name, payload)
  }
})

load('Example').forEach(render.bind(null, 'Example'))

微前端使用hypernova-svelte。你可以看看我为在Nuxt中实现Svelte而写的这篇文章。

https://ara-framework.github.io/website/blog/2019/08/27/nuxt-js