PouchDB 和 SvelteKit

Posted

技术标签:

【中文标题】PouchDB 和 SvelteKit【英文标题】:PouchDB and SvelteKit 【发布时间】:2021-07-19 16:59:20 【问题描述】:

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

<script context="module">
    export const s-s-r = 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 听起来是个坏主意。看看这个超简单的应用程序,github.com/neighbourhoodie/svelte-pouchdb-couchdb - 也许会顿悟。 我已将文件从 pouchdeb-7.2.1.js 重命名为 pouchdb.js。我不认为这有什么不同。 遗憾的是提示并没有带来任何启示。正如我所写的,问题已经出现在单行页面上。所有行都返回错误消息。而且我尝试了更多变体: import PouchDB from '$lib/pouchdb.js';从“pouchdb-browser”导入 PouchDB;从“pouchdb”导入 PouchDB; 我启动了罐装 sveltekit 应用程序,然后我做了npm i pouchdb-browsernpm i pouch-adapter-memory,然后就使用了例如import PouchDB from "pouchdb-browser"。看起来不错,但我得到了可怕的“未定义全局”。可能与一些 global/globalThis 疯狂有关(我对 svelte 不熟悉)。我应该认为 npm 应该可以正常工作。 是的,我在尝试时也收到此错误消息。也许对 SvelteKit 和 PouchDB 有详细了解的人可以看看。 【参考方案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 似乎是一个转换为 JS 模块的“window.global”脚本。)

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

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

我只会使用上面的&lt;script&gt; 解决方法。

【讨论】:

感谢您提供此解决方法。我尝试使用 onMount,但显然不太正确。 谢谢!在 Svelte 中为我工作,但不是 'onMount' 我需要将自定义函数 'db_library_loaded' 绑定到 on:load 事件,例如,【参考方案2】:

对于未来尝试将pouchdb-browser 和/或RxDB 与 sveltekit 集成的谷歌用户,这里是在使用 vite 时“修复”浏览器中 pouchdb 环境的更改。

    %svelte.head% 之前添加到您的&lt;head&gt; 部分
<script>
    window.process = window.process || env: NODE_DEBUG:undefined, DEBUG:undefined;
    window.global = window;
</script>
    svelte.config.js 中添加optimizeDepsconfig.kit.vite.optimizeDeps
optimizeDeps: 
    allowNodeBuiltins: ['pouchdb-browser', 'pouchdb-utils', 'base64id', 'mime-types']

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

感谢: pouchdb/pouchdb#8266 (comment)

【讨论】:

【参考方案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:JavaScript同步数据库

ionic 上的 Pouchdb 和 Cordova-sqlcipher-adapter:有可能吗?

跨平台存储与同步:IonicCouchbase和PouchDB结合使用范例

使用 listView 和 PouchDb 的 Ionic (v1) 应用程序出现问题

同一设备上的每个用户一个pouchDB与单个CouchDB同步

PouchDB 检查本地数据库是不是存在