我想将 PouchDB 与 SvelteKit 一起使用。我已将 pouchdb-7.2.1.js 复制到 SvelteKit 中的 /src/lib
d 并将其重命名为 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:
<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
ed,PouchDB 似乎期望 Svelte/Vite/Rollup 不提供的特定环境。 (Svelte/Vite 对正确的 ESM 模块最满意;PouchDB 似乎是一个转换为 JS 模块的“window.global”脚本。)
可能有办法修改configuration创建 PouchDB 期望的环境。我认为您将不得不修改 svelte.config.cjs文件。 (特别是确定 vite
section 的 rollup configuration.)
您可能会在 related issue for PouchDB + Angular 中找到一些提示.
我只会使用 <script>
上面的解决方法。
关于couchdb - PouchDB 和 SvelteKit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67264618/