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>

当 imported 时，PouchDB 似乎期望 Svelte/Vite/Rollup 不提供的特定环境。（Svelte/Vite 对适当的 ESM 模块最满意；PouchDB 似乎是一个“window.global”脚本，已转换为 JS 模块。）

可能有办法修改 configuration to create the environment expected by PouchDB. I think you would have to modify the svelte.config.cjs file. (Specifically the vite section that determines the rollup configuration.)

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

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

Answer 2

对于尝试将 pouchdb-browser and/or RxDB 与 sveltekit 集成的未来 google 员工，这里是使用 vite 时在浏览器中“修复”pouchdb 环境的更改。

在 %svelte.head%

<head>

<script>
    window.process = window.process || {env: {NODE_DEBUG:undefined, DEBUG:undefined}};
    window.global = window;
</script>

在 svelte.config.js 中添加 optimizeDeps 到 config.kit.vite.optimizeDeps

optimizeDeps: {
    allowNodeBuiltins: ['pouchdb-browser', 'pouchdb-utils', 'base64id', 'mime-types']
}

这是对我的应用进行这些更改的提交： https://github.com/TechplexEngineer/bionic-scouting/commit/d1c4a4dcdc7096ae40937501d97a7ef9ee10ab66

感谢： pouchdb/pouchdb#8266 (comment)

Answer 3

我一直在与这个同样的问题作斗争。我决定走另一条路。这可能不正确，但它确实有效。

我在 app.html 头上添加了两个脚本：

<head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="%svelte.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial- 
    scale=1" />
    <!-- Call the Pouchdb import -->
    <script type="text/javascript" src="../src/lib/pouchdb.js">
    </script>
    <!-- create new databases for use in the app -->
    <script>
        const user = new PouchDB('user');
    </script>
    %svelte.head%
</head>

然后在任何我想使用数据库的组件中，我添加一个额外的脚本标签来定义变量“user”：

<script lang="ts" context="module">
    //Declare the database name so that it is recognized.
    declare const user;
</script>

<script lang="ts">
//Example use of database.
const addUser = () => {
    //Call the database by name established in app.html
    user.put({
        _id: 'someid',
        firstName: 'Jon',
        lastName: 'doe'
    });
};
</script>

这是我将 PouchDB 与 SvelteKit 结合使用的最简单方法。所有其他解决方案都需要对配置文件进行重大修改、更改环境变量以及对整个应用程序中的代码进行不必要的调整。希望对您有所帮助。

PouchDB 和 SvelteKit

PouchDB and SvelteKit

couchdb

pouchdb

svelte

sveltekit