如何将 Svelte 集成到其他 App Stack答案

【问题标题】：How to integrate Svelte in other App Stack如何将 Svelte 集成到其他 App Stack
【发布时间】：2022-01-23 03:05:18
【问题描述】：

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

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

【问题讨论】：

标签： backend svelte svelte-3

【解决方案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 或 svelte-loader。

【讨论】：

【解决方案2】：

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

对于多页应用，我建议使用SvelteKit。在这种情况下，有一个特殊的fetch HTTP 钩子可以帮助集成服务器端渲染，建议所有后端 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.

【讨论】：