如何将 Svelte 集成到其他 App Stack 中

Question

我想知道是否可以将前端应用程序的 Svelte 与默认后端堆栈不同的后端堆栈集成在一起，在 Rails 上使用 python、Ruby 或PHP 例如服务器？

是否可以将其用于多页应用，还是应该仅用于单页应用？

Answer 1

是，您可以使用任何后端呈现 html 标签。

<div id="svelte-app"></div>
<script src="dist/main.js"></script>

如果大部分页面是服务器呈现的，但您希望向页面添加一些交互式组件，则这种设置很有用。

// src/main.js
import App from './App.svelte';

new App({
  target: document.getElementById('svelte-app'),
  props: {
    name: 'world',
  },
});

但是您需要执行 Svelte 编译步骤的东西。

你可以使用 Vite：

npm install --save-dev vite svelte @sveltejs/vite-plugin-svelte

// vite.config.js
import path from "path";
import { defineConfig } from "vite";
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  build: {
    lib: {
      formats: ["es"],
      fileName: (format)=>`main.js`,
      entry: path.resolve(__dirname, "src/main.js"),
    },
  },
});

运行 npx vite build --watch 将生成 dist/main.js 并在代码更改时重新编译。

如果您已经在使用捆绑器，也可以使用 rollup-plugin-svelte or svelte-loader。

Answer 2

将 Svelte 与不同的后端集成与与任何其他前端技术集成没有区别。

对于多页应用，我建议使用 SvelteKit。在这种情况下，有一个特殊的 fetch HTTP 挂钩可以帮助集成 server-side 渲染，建议所有后端 API 公开为 REST/JSON 以获得对 fetch SSR 处理。

Read my blog post about how I integrated Svelte with Python backend. You can find the actual frontend source code here.

如何将 Svelte 集成到其他 App Stack 中

How to integrate Svelte in other App Stack

backend

svelte

svelte-3