PouchDB和SvelteKit
我想把PouchDB和SvelteKit结合使用。我在SvelteKit中将pouchdb-7.2.1.js复制到SvelteKit 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的正确方法是什么？
回答 3
Stack Overflow用户
发布于 2021-04-26 23:46:55
下面是一个通过脚本标记使用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/Rollup不提供的特定环境。(使用合适的ESM模块，Svelte/Vite是最快乐的；PouchDB似乎是一个"window.global“脚本，被转换为JS模块。)
可能有一种方法可以修改配置以创建PouchDB所期望的环境。我认为您必须修改svelte.config.cjs文件。(特别是确定部分的卷起配置)
您可能会在这个PouchDB +角的相关问题中找到一些提示。
我只需要使用上面的<script>工作。
Stack Overflow用户
发布于 2021-12-18 04:11:00
对于试图将pouchdb-browser和/或RxDB与sveltekit集成在一起的未来谷歌人来说，这里有一些改变，可以“修复”使用vite时浏览器中pouchdb的环境。
- 将
<head>部分添加到%svelte.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进行这些更改的提交
Stack Overflow用户
发布于 2022-02-04 06:09:48
我已经和这个问题斗争了一段时间了。我决定走另一条路。这可能是不对的，但它正在起作用。
我在我的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最简单的方法。所有其他解决方案都需要对配置文件进行重大修改，更改环境变量，并在整个应用程序中对代码进行不必要的调整。我希望这能帮到你。
https://stackoverflow.com/questions/67264618
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号