[英]PouchDB and SvelteKit
I want to use PouchDB with SvelteKit.我想将 PouchDB 与 SvelteKit 一起使用。 I have copied pouchdb-7.2.1.js to
/src/lib
d in SvelteKit and renamed it to pouchdb.js.我已将 pouchdb-7.2.1.js 复制到 SvelteKit 中的
/src/lib
d 并将其重命名为 pouchdb.js。 Pouchdb should run in the browser. Pouchdb 应该在浏览器中运行。 Therefore I have used ssr=false to suppress server side rendering.
因此我使用 ssr=false 来抑制服务器端渲染。 I get the first error at the import statement.
我在导入语句中收到第一个错误。 This is my first very short page (couchdb.svelte):
这是我的第一个非常短的页面(couchdb.svelte):
<script context="module">
export const ssr = false;
</script>
<script>
import PouchDB from '$lib/pouchdb.js';
</script>
I get an error 500我收到错误 500
import not found: PouchDB
I have tried a lot of diffent version without any success.我尝试了很多不同的版本,但都没有成功。 For example:
例如:
import PouchDB from 'pouchdb-browser'; (After npm i pouchdb-browser)
import PouchDB from 'pouchdb'; (After npm i pouchdb)
What is the correct way to use pouchdb?使用 pouchdb 的正确方法是什么?
Here is a work-around that uses PouchDB via a script tag:这是通过脚本标签使用 PouchDB 的解决方法:
index.svelte: 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>
When import
ed, PouchDB seems to expect a certain environment that Svelte/Vite/Rollup does not provide.当
import
ed 时,PouchDB 似乎期望 Svelte/Vite/Rollup 不提供的某个环境。 (Svelte/Vite is happiest with proper ESM modules; PouchDB seems to be a "window.global" script that was converted to a JS module.) (Svelte/Vite 对正确的 ESM 模块最满意;PouchDB 似乎是一个转换为 JS 模块的“window.global”脚本。)
There may be a way to modify the configuration to create the environment expected by PouchDB.可能有一种方法可以修改配置以创建 PouchDB 期望的环境。 I think you would have to modify the svelte.config.cjs file.
我认为您必须修改svelte.config.cjs文件。 (Specifically the
vite
section that determines the rollup configuration. ) (特别是决定rollup 配置的
vite
部分。)
You might find some hints in this related issue for PouchDB + Angular .您可能会在PouchDB + Angular 的相关问题中找到一些提示。
I would just use the <script>
work-around above.我只会使用上面的
<script>
解决方法。
For future googlers trying to integrate pouchdb-browser
and/or RxDB
with sveltekit here are the changes to "fix" the enviornment for pouchdb in the browser when using vite.对于未来尝试将
pouchdb-browser
和/或RxDB
与 sveltekit 集成的谷歌用户,这里是使用 vite 时“修复”浏览器中 pouchdb 环境的更改。
<head>
section before %svelte.head%
%svelte.head%
之前添加到您的<head>
部分<script>
window.process = window.process || {env: {NODE_DEBUG:undefined, DEBUG:undefined}};
window.global = window;
</script>
svelte.config.js
add the optimizeDeps
to config.kit.vite.optimizeDeps
svelte.config.js
中将optimizeDeps
添加到config.kit.vite.optimizeDeps
optimizeDeps: {
allowNodeBuiltins: ['pouchdb-browser', 'pouchdb-utils', 'base64id', 'mime-types']
}
Here is a commit that makes these changes to my app: https://github.com/TechplexEngineer/bionic-scouting/commit/d1c4a4dcdc7096ae40937501d97a7ef9ee10ab66这是对我的应用程序进行这些更改的提交: https://github.com/TechplexEngineer/bionic-scouting/commit/d1c4a4dcdc7096ae40937501d97a7ef9ee10ab66
Thanks to: pouchdb/pouchdb#8266 (comment)感谢: pouchdb/pouchdb#8266(评论)
I have been battling this very same problem for a while.我一直在与同样的问题作斗争一段时间。 I decided to go a different route.
我决定 go 一条不同的路线。 This may not be right, but it is working.
这可能不正确,但它正在工作。
I added two scripts to my app.html head:我在 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>
Then in any component that I want to use the database, I add an additional script tag to define the variable "user":然后在我想使用数据库的任何组件中,我添加一个额外的脚本标签来定义变量“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>
That has been the easiest method for me to employ PouchDB with SvelteKit.这对我来说是使用 PouchDB 和 SvelteKit 最简单的方法。 Every other solution required significant modifications to configuration files, changes to environment variables, and unnecessary adaptations of code throughout the application.
所有其他解决方案都需要对配置文件进行重大修改、更改环境变量以及在整个应用程序中对代码进行不必要的调整。 I hope this helps.
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.