在我的 html WebApp 中无法访问 PouchDB答案

【问题标题】：Having trouble reaching PouchDB in my html WebApp在我的 html WebApp 中无法访问 PouchDB
【发布时间】：2022-02-09 17:38:26
【问题描述】：

我想在我的 WebApp 中使用 pouchDB，这样当我点击一个按钮时，来自 JSON 文件的数据将被保存到 pouchDB。在我的 index.html 中，我首先导入了这些：

<script type="module" src="pouchdb/packages/node_modules/pouchdb/src/pouchdb.js"></script>
<script type="module" src="pouchdb-load/dist/pouchdb.load.js"></script>
<script src="js/pdb.js"></script>

我将 pouchDB 克隆到我的工作 html 文件夹中，所以路径应该没问题。但是在我的 js 文件中，它开始从这一行 var PouchDB = require('pouchdb'); 抛出错误，说明“未捕获的 ReferenceError：require is not defined”，我认为这意味着我的 WebApp 无法从 src 到达 pouchDB。

我尝试过的：

在html文件中使用<script src="//cdn.jsdelivr.net/npm/pouchdb@7.2.1/dist/pouchdb.min.js"></script>，而不是在js文件夹中使用pouchdb.js作为源。

这也是PouchDB official guide 在其 todo 演示中使用的唯一来源。这个演示在我的笔记本电脑上运行良好，但是当涉及到我自己的 WebApp 时，它不再工作并且仍然抛出同样的错误。

此方法的另一个问题是，即使 cdn 链接有效并且我可以访问 pouchdb.min.js，我仍然需要 pouchdb.load.js 才能工作，因为我希望将 JSON 文件中的数据保存到袋子。

在PouchDB official guide中，它的app.js中甚至没有包含var PouchDB = require('pouchdb');这一行，而是直接写了var db = new PouchDB('todos');。但是当我尝试这样做时，出现了一个新错误：'ReferenceError: PouchDB is not defined'。
我也试过npm install pouchdb-browser然后在我写的js文件里：

var PouchDB = require('pouchdb-browser');
var pouchdb = PouchDB.default.defaults();

但它会引发与 require 相关的相同错误。

我认为问题仍然在于 html 中的源未能在 pouchdb.js 与我的 WebApp 之间创建这种连接。同时，当我按照官方指南制作待办事项演示时，一切似乎都很好。知道可能导致此问题的原因以及如何解决吗？

【问题讨论】：

Require 在 Node.js 中定义。浏览器没有要求的定义。研究使用 webpack 或 rollupjs 来翻译/打包你的代码。
这能回答你的问题吗？ Javascript error : Uncaught ReferenceError: require is not defined
@RamblinRose 谢谢！你链接的那个问题部分回答了我的问题，因为即使我完全按照 pouchDB 演示并去掉了 require 部分，它仍然无法工作，所以我相信还有其他嵌入式问题

标签： javascript html node.js couchdb pouchdb

【解决方案1】：

我认为您混淆了客户端和服务器端编程。您不能在客户端 JavaScript 代码中本地执行“要求”。这是一个非常简单的示例，从表单中获取数据并将其写入本地 PouchDB：

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/pouchdb@7.2.1/dist/pouchdb.min.js"></script>
  </head>
  <body>

     <textarea id="doc" rows="10">
{
  "a": 1
}
     </textarea>
     <br>
     <button onclick="save()">Save</button>
     <div id="response"></div>
     <script>

       const db = new PouchDB('todos')

       const save = async function() {
         const el = document.getElementById('doc')
         const doc = JSON.parse(el.value)
         const response = await db.post(doc)
         document.getElementById('response').innerHTML = JSON.stringify(response)
       }
     </script>
  </body>
</html>

它从 CDN 获取 PouchDB - 请注意，我使用 https:// 而不是 // 作为协议，因为我们总是希望使用 https 获取 PouchDB，即使托管页面是在 http 上提供的。

加载 PouchDB 后，我们使用 post 函数将文档写入 PouchDB 数据库，并将响应写回页面。

【讨论】：

谢谢，这很有帮助。我很好奇为什么 new PouchDB() 脚本只有在我将它们放在 html 中时才起作用，但在它们放在 js 文件中时不起作用……（我确实记得在我的 index.html 中链接到 js）。跨度>
还有一个问题，因为我是新手，在阅读了您关于读取文件中数据并保存到 pouchDB 的代码后，我不确定应该将文件目录放在哪里。例如。我的文件目录是data/test.json，我应该把这个放在代码的什么地方？