将 Svelte 捆绑为带有资产如图像、svg 文件的网络组件

问题描述

我对苗条很陌生,并且在我为考试做的项目中遇到了问题。

我和我的组织决定为预先存在的微服务构建一个微前端。 该微服务基于SpringBoot,项目模块由maven管理如下:

- root
|- tool-backend (spring boot)
    |- pom.xml  <--- uses maven-resouce-plugin
|- tool-frontend (svelte)
    |- pom.xml  <--- describes how to build the frontend
    |- public
       |- build
          |- bundle.js  <--- bundled by svelte-compiler and copied to `tool-backend/src/resources`
       |- assets/svg
          |- logo.svg
    |- src
       |- app.svelte

我省略了服务实现。 ist 只是一个 @RestController,它提供 bundle.js,它将被另一个前端套件和其他东西使用。

在 app.svelte 中,我执行了以下操作:

<svelte:options tag="tool-component" />

<main>
    <img src="/assets/svg/logo.svg" alt="logo" width="200px" />
</main>

你可能已经注意到 svelte 被配置为构建一个 web 组件,而不是一个 svelte 应用程序。 组件应该使用来自目录 tool-frontend/public/assets/svg/logo.svg 的 svg,这在使用 npm start 时工作正常。但是当用我的 tool-backend 模块构建它时,logo.svg 没有与它捆绑在一起。这意味着当运行 spring-boot 应用程序并从 svelte 提供 bundle.js 时,svg 不会在浏览器中呈现。


现在我的问题:

是否有通过汇总构建过程将资产与 svelte 捆绑在一起的简单解决方案?

我使用了来自 svelte 的汇总模板,您可以在 here 中找到。


我知道我可以只使用 maven-resource 插件将资产复制到我的 spring-boot 服务中并从那里提供资产,但我不想过多地接触该服务。让前端自己处理对我们来说会好得多。

我也不确定 webpack 是否做了类似的事情。到目前为止,我还没有过多地处理 webpack。看到开箱即用的样板代码会更好。

也欢迎其他看起来不错的解决方案。


解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...