CouchDB PouchDB和细长套件

laawzig2 于 2022-12-09 发布在 CouchDB

关注(0)|答案(3)|浏览(175)

我想在SvelteKit中使用PouchDB。我已经将pouchdb-7.2.1.js复制到SvelteKit中的/src/lib d，并将其重命名为pouchdb.js。Pouchdb应该在浏览器中运行。因此，我使用ssr=false来抑制服务器端呈现。我在import语句中得到了第一个错误。这是我的第一个非常短的页面（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的正确方法是什么？

couchdb

来源：https://stackoverflow.com/questions/67264618/pouchdb-and-sveltekit

3条答案

按热度按时间

pb3s4cty1#

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

索引.纤细：

<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/Rollup并没有提供这个环境。PouchDB似乎是一个window.global被转换为JS模块的“www.example.com“脚本。）
可能有一种方法可以修改配置以创建PouchDB所期望的环境。我认为您必须修改svelte.config.cjs文件。（特别是确定汇总配置的vite部分。）
您可能会在此related issue for PouchDB + Angular中找到一些提示。
我只会使用上面的<script>解决方法。

赞(0）回复(0）举报 2022-12-09

xqk2d5yq2#

对于未来试图将pouchdb-browser和/或RxDB与sveltekit集成的googlers来说，这里是在使用vite时“修复”浏览器中pouchdb环境的更改。
1.添加到%svelte.head%之前的<head>部分

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

1.在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（评论）

赞(0）回复(0）举报 2022-12-09

z18hc3ub3#

我已经和这个同样的问题斗争了一段时间。我决定走一条不同的路线。这可能不对，但它正在起作用。
我在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结合使用的最简单的方法。其他的解决方案都需要对配置文件进行大量修改，对环境变量进行更改，并对整个应用程序中的代码进行不必要的修改。我希望这能有所帮助。

赞(0）回复(0）举报 2022-12-09

我来回答

CouchDB PouchDB和细长套件

3条答案

相关问题

热门标签

最新问答