如何在其他应用程序堆栈中集成Svelte

Question

我想知道是否有可能将前端应用程序的Svelte与不同于默认的后端堆栈集成在一起，例如与python、Ruby on Rails或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并在代码更改时重新编译。

或者，如果您已经在使用bundler，请使用汇总插件svelte或svelte加载程序。

Answer 2

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

对于多页应用程序，我建议使用SvelteKit。在这种情况下，有一个特殊的fetchHTTP挂钩可以帮助服务器端渲染上的集成，建议所有后端API都以REST/JONS的形式公开，以便对fetchSSR处理提供最佳支持。

阅读我关于如何将Svelte与Python后端集成的博客文章。您可以在这里找到实际的前端源代码。