个人中心
gpt4 book ai didi

svelte - 从一个 SvelteKit App 调用组件到另一个 SvelteKit App

转载 作者：行者123 更新时间：2023-12-04 11:43:52 34 4
gpt4 key购买 nike

注意:我已将我的 Sapper 应用程序迁移到 SvelteKit(下面的更新 3)，因此现在正在寻找 SvelteKit 的解决方案。
我有多个使用 Sapper 构建的 MFE(微前端)，它们位于不同的服务器下。我想在另一个 MFE 中调用/渲染一个 MFE 中有一个 svelte 组件(呈现 HTML 内容)。我怎样才能做到这一点？我尝试在本地同时运行/提供两个 MFE 并执行了 fetch(route-that-loads-component)，但它在响应中返回了一个 POJO，我不知道如何处理它:

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: Gunzip {
      _writeState: [Uint32Array],
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 5,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      bytesWritten: 0,
      _handle: [Zlib],
      _outBuffer: <Buffer 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 f7 7f 00 00 41 ff e2 55 48 89 e5 56 57 48 81 ec 10 01 00 00 48 89 75 e8 49 3b 65 e0 0f 86 fb 11 00 00 ... 16334 more bytes>,
      _outOffset: 0,
      _chunkSize: 16384,
      _defaultFlushFlag: 2,
      _finishFlushFlag: 2,
      _defaultFullFlushFlag: 3,
      _info: undefined,
      _maxOutputLength: 4294967295,
      _level: -1,
      _strategy: 0,
      [Symbol(kCapture)]: false,
      [Symbol(kTransformState)]: [Object],
      [Symbol(kError)]: null
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://localhost:3000/mfe/content-mfe/content/testrouteasset1',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}
更新 1:
我可以通过做 response.text() 得到 MFE 的回应。 ，这就是它的样子: 
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="theme-color" content="#333333">

        <base href="/mfe/content-mfe/">

        <link rel="stylesheet" href="global.css">
        <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
        <link rel="icon" type="image/png" href="favicon.png">

        <!-- Sapper creates a <script> tag containing `src/client.js`
             and anything else it needs to hydrate the app and
             initialise the router -->
        <script>__SAPPER__={baseUrl:"/mfe/content-mfe",preloaded:[void 0,null,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/mfe/content-mfe/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/mfe/content-mfe/client/client.1dc273d9.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/mfe/content-mfe/client/shimport@2.0.4.js";s.setAttribute("data-main","/mfe/content-mfe/client/client.1dc273d9.js")}document.head.appendChild(s)</script>   

        <!-- Sapper generates a <style> tag containing critical CSS
             for the current page. CSS for the rest of the app is
             lazily loaded when it precaches secondary pages -->
        <link rel="stylesheet" href="client/client-a7fe6d9e.css"><link rel="stylesheet" href="client/FieldErrorMessage-bce587e1.css">

        <!-- This contains the contents of the <svelte:head> component, if
             the current page has one -->

</head>
<body>
        <!-- The application will be rendered inside this element,
             because `src/client.js` references it -->
        <div id="mfe-content">


<main><slot></slot></main></div>
</body>
</html>
但是，Sapper 正在替换向调用 MFE 的 baseURL 发送响应的 MFE 的 baseURL，使其不可水合，因为 client.js 和 client.css 不可达(404s)
enter image description here
即使我最终解决了这些基本路径 URL 问题，它仍然可以在一页上启动 2 个 Sapper 应用程序吗？
更新 2:
我以某种方式设法从请求内容的位置为 MFE 添加静态 baseURL，现在我遇到了水化问题，因为 Sapper 无法在一页中水化 2 个 Sapper 应用程序。
更新 3:
我已将我的 Sapper 应用程序迁移到 SvelteKit。因此，立即寻找有关如何使用 SvelteKit 实现此目标的建议!
任何其他将组件从一个 MFE 调用/导入到另一个 MFE 的解决方案，或者将不胜感激!

最佳答案

迁移到 SvelteKit(问题中的更新 3)后，我能够通过创建端点(路由文件夹中的 .js 文件)、导入所需组件并将其导出来解决此问题，如下所示:

export async function get({ query, page }) {
    const ASSET = (await import("../../assets/myasset.svelte")).default;

    if (ASSET) {
        let renderedAsset = Asset.render();
        return {
            body: { asset: renderedAsset }
        };
    } else {
        return {
            status: data.status,
            error: new Error(`Could not load ${response}`)
        }
    }
}

这将返回一个包含 HTML 和 CSS 代码的对象: 
{
    "asset": {
        "html": "<h1 class=\"s-ZmOKpGJa32Cj\">Hello!    \n</h1>",
        "css": {
            "code": "h1.s-ZmOKpGJa32Cj{color:blue}.s-ZmOKpGJa32Cj{}",
            "map": null
        },
        "head": ""
    }
}
最后可用于渲染到 DOM，如下所示: 

<script context="module">
    export async function load({ fetch }) {
        let status, Final;
        const Asset = await fetch('path-to-the-endpoint');
        if (Asset && Asset.status === 404) {
            return (status = 'Asset not found');
        }
        if (Asset && Asset.ok) {
            Final = await Asset.json();
            return {
                props: {
                    Final: Final,
                    status: 'Asset is OK',
                },
            };
        } else {
            return {
                props: {
                    status: 'Okay, no prop.',
                },
            };
        }
    }
</script>

<script>
    export let Final, status;
</script>
{status}

{@html `<${''}style>${Final.asset.css.code }</${''}style>` }

{@html Final.asset.html}

这在 SvelteKit 中非常有效。但是，我还没有测试这是否适用于 Sapper(因为我已经离开了 Sapper)，但希望它应该可以工作!

关于svelte - 从一个 SvelteKit App 调用组件到另一个 SvelteKit App，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67941692/

34 4 0
文章推荐： asp.net-core - 在 VS Code 中构建之前运行 Gulp 任务
文章推荐： r - 如何在r中按组计算字符串中的字符？
文章推荐： scala - 如何在 scala 中使用泛型创建部分函数？
文章推荐： swagger - 在 NestJS 中，我可以在 Controller 级别添加什么装饰器以将 Authorization header 添加到我的 Swagger 文档？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com