微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

PouchDB 和 SvelteKit

如何解决PouchDB 和 SvelteKit

我想将 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 的正确使用方法是什么?

解决方法

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

index.svelte:

    @Test
    void test() {
        Flux<Integer> flux1 = Flux.just(9,8,3,-2);
        Flux<Integer> flux2 = Flux.just(7,-2,4,2,1);
        Flux<Integer> flux3 = Flux.just(6,5,-4);

        var k = 5;
        List<Flux<Integer>> publishers = List.of(flux1,flux2,flux3);
        var flux = Flux.merge(publishers)
                .log()
                .limitRate(2)
                .buffer(2)
                .reduce((l1,l2) -> {
                    System.out.println(l1);
                    System.out.println(l2);

                    return Stream.concat(
                            l1.stream(),l2.stream()
                    ).sorted(Comparator.reverseOrder())
                    .limit(k)
                    .collect(Collectors.toList());
                })
                .log();

        StepVerifier.create(flux)
                .expectNext(List.of(9,7,6,5))
                .expectComplete()
                .verify();
    }


<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> ed 时,PouchDB 似乎期望 Svelte/Vite/Rollup 没有提供的特定环境。 (Svelte/Vite 对 ESM 模块最满意;PouchDB 似乎是一个转换为 JS 模块的“window.global”脚本。)

可能有一种方法可以修改 configuration 以创建 PouchDB 期望的环境。我认为您必须修改 svelte.config.cjs 文件。 (特别是决定 vite sectionrollup configuration.

您可能会在此 related issue for PouchDB + Angular 中找到一些提示。

我只想使用上面的 import 解决方法。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。