PouchDB 和 SvelteKit

Question

我想将 PouchDB 与 SvelteKit 一起使用。我已将 pouchdb-7.2.1.js 复制到 SvelteKit 中的/src/libd 并将其重命名为 pouchdb.js。Pouchdb 应该在浏览器中运行。因此我使用 ssr=false 来抑制服务器端渲染。我在导入语句中遇到第一个错误。这是我的第一个非常短的页面 (couchdb.svelte)：

<script context="module">
    export const ssr = false;
</script>

<script>
    import PouchDB from '$lib/pouchdb.js'; 
</script>

我收到错误 500

import not found: PouchDB

我尝试了很多不同的版本，但都没有成功。例如：

import PouchDB from 'pouchdb-browser';  (After npm i pouchdb-browser)
import PouchDB from 'pouchdb';          (After npm i pouchdb)

使用 pouchdb 的正确方法是什么？

Answer 1

这是通过脚本标记使用 PouchDB 的解决方法：

index.svelte：

<script>
    import { onMount } from 'svelte'

    // Ensure execution only on the browser, after the pouchdb script has loaded.
    onMount(async function() {
        var db = new PouchDB('my_database');
        console.log({PouchDB})
        console.log({db})
    });
</script>


<svelte:head>
    <script src="//cdn.jsdelivr.net/npm/pouchdb@7.2.1/dist/pouchdb.min.js"></script>
</svelte:head>

当import编辑，PouchDB似乎想到了一定的环境，斯维尔特/快捷财经/汇总不提供。（Svelte/Vite 对 ESM 模块最满意；PouchDB 似乎是一个转换为 JS 模块的“window.global”脚本。）

可能有一种方法可以修改配置以创建 PouchDB 期望的环境。我认为您必须修改svelte.config.cjs文件。（特别是确定汇总配置的vite部分。）

您可能会在PouchDB + Angular 的相关问题中找到一些提示。

我只会使用<script>上面的解决方法。