使用 Svelte、Fable 和 Tauri

Question

我正在创建一个 Tauri 应用程序，它使用 Fable 将 F# 编译为 JS。我也想和它一起使用 Svelte。到目前为止，我已将 F# 文件编译为 .js 文件。我创建了一个包含以下内容的 .svelte 文件（名为 App.svelte）

<script>
    import './App.fs.js'
</script>

<main>
    <p>{msg}</p>
</main>
<style></style>

我的index.html:

<body>
    <script src="main.mjs"></script>
</body>

还有我的 main.mjs:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

我运行程序npm run build。这会编译我的 F# 文件，它们就准备好了。我运行 npm run tauri build -- --debug 编译我的整个 Tauri 应用程序并打开它。

我这样做了，但屏幕上没有任何显示。但是当我查看控制台时，它显示 main.mjs 无法导入。

据推测，我需要编译 Svelte 文件。但是 Svelte 使用 rollup，我想我需要使用 webpack 来与 Fable 或 Tauri 兼容。

所有这些文件都在 project/src.

我需要在 index.html

中编译和使用 Svelte 文件

Answer 1

你应该给我们一个可重现的例子来向我们展示你是如何配置你的项目的，以及你为让它工作所做的努力。

我在这个答案中给你一个工作示例来研究，而不是回答你的问题，因为它遗漏了很多关于你的设置的细节。

基本上，对于 npm run tauri build 您的应用，您需要配置您的项目以构建 Fable 代码，然后 Svelte 代码，然后将所有内容与 Tauri.

捆绑在一起

此外，您不需要使用 webpack。汇总很好。

提示：如果出于某种原因你真的需要 webpack，只需运行它运行在 rollup 之前，你会在 [=56] 上找到 webpack svelte-loader =]

我发布了一个工作模板项目来回答您的问题，您可以 use/study 检查您缺少的内容。它是按照以下流程创建的：

dotnet new --install Fable.Template
dotnet new fable

之后，就是组合/合并所有内容，并将 Tauri 添加到 Svelte 应用程序中。 请检查项目以了解我是如何配置的

如果您有更准确的问题，请再提出一个问题。

Using Svelte, Fable and Tauri