0

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

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

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

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

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

有人有想法吗？

谢谢 ：）

4

1 回答 1

0

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

这种方法由一个组件组成，该组件将安装一个占位符微前端视图。然后组件发出一个名为的 DOM 事件，该事件NovaMount被微前端的 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

于 2019-09-16T03:20:12.777 回答