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

Question

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

以及何时，如何在 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