如何在运行时将编译的苗条组件/应用程序导入到苗条应用程序中

Question

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

什么时候，我如何在 svelte 3 中编译单个组件。我找到了这种方法，但文档中没有任何内容：https://github.com/sveltejs/svelte/issues/1576

我想将一个页面上的几个独立(托管(Svelte应用程序组合成一个更大的svelte应用程序(微前端(。目标是，每个子应用程序都可以独立部署和托管在任何地方(可能是自己的 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