Использование Svelte, Fable и Tauri

Я создаю приложение 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.

Мне нужно скомпилировать и использовать файл Svelte в index.html

🤔 А знаете ли вы, что...
JavaScript используется для разработки современных одностраничных приложений (SPA), где весь контент загружается асинхронно.


49
1

Ответ:

Решено

? Вы должны предоставить нам воспроизводимый пример, чтобы показать нам, как вы настроили свой проект и что вы пытались заставить его работать.


? Здесь, в этом ответе, я даю вам рабочий пример для изучения, а не отвечаю на ваш вопрос, поскольку в нем отсутствует много деталей о вашей настройке.

По сути, для npm run tauri build вашего приложения вам нужно настроить свой проект, чтобы создать код Басня, затем код Стройный, а затем связать все с Таури.

Кроме того, вам не обязательно использовать webpack. Роллап хороший.

подсказка: если вам по какой-то причине действительно нужен веб-пакет, просто запустите его перед сборкой, и вы найдете веб-пакет svelte-loader на github

Я опубликовал проект рабочего шаблона, чтобы ответить на ваш вопрос, который вы могли бы использовать/изучить, чтобы проверить, чего вам не хватает. Он был только что создан, следуя этому потоку:

  1. создать приложение Svelte yarn create svelte-app
  2. создать приложение Таури yarn create tauri-app
  3. создать приложение Fable
dotnet new --install Fable.Template
dotnet new fable

Затем, после этого, нужно просто объединить / объединить все и добавить Tauri в приложение Svelte. Пожалуйста, проверьте проект, чтобы увидеть, как я его настроил

Если у вас есть более точный вопрос, пожалуйста, задайте другой вопрос.