时间戳

首页 > 解决方案 > 将 Svelte 捆绑为带有资产（如图像、svg 文件）的 Web 组件

spring-boot - 将 Svelte 捆绑为带有资产（如图像、svg 文件）的 Web 组件

问题描述

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

我和我的组织决定为现有的微服务构建一个微前端。此微服务基于 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

我省略了服务实现。这只是一个 @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 应用程序。该组件应使用 dirtool-frontend/public/assets/svg/logo.svg中的 svg，使用npm start. 但是，当从我的tool-backend-module 构建它时，logo.svg 没有与它捆绑在一起。这意味着当运行 spring-boot 应用程序并从 svelte 提供 bundle.js 时，svg 不会在浏览器中呈现。

现在我的问题：

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

我使用了 svelte 的汇总模板，您可以在此处找到。

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

我也不确定 webpack 是否会做类似的事情。直到现在我还没有处理太多的 webpack。看到开箱即用的样板代码会更好。

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

标签： spring-bootassetsweb-componentsveltemicro-frontend

解决方案

推荐阅读