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

Posted 2023-03-28

【中文标题】如何在运行时将编译的 svelte-components/-apps 导入 svelte-app

【英文标题】：How can I import compiled svelte-components/-apps into a svelte-app at runtime

【发布时间】：2019-11-21 11:59:37

【问题描述】：

是否可以动态导入预编译的 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。

有人有想法吗？

谢谢你:)

【参考方案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

【讨论】：

如果您需要使用 svelte 作为聚合器（宿主应用程序）的演示代码，请告诉我