Quiero usar pouchDB en mi aplicación web para que cuando haga clic en un botón, los datos de un archivo JSON se guarden en pouchDB. En mi index.html importé estos al principio:
<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> Cloné pouchDB en mi carpeta html de trabajo, por lo que la ruta debería estar bien. Pero en mi archivo js comenzó a arrojar un error desde esta línea var PouchDB = require('pouchdb'); indicando 'Error de referencia no capturado: el requisito no está definido', lo que creo que significa que mi aplicación web no pudo llegar a pouchDB desde el src.
Lo que he probado:
<script src="//cdn.jsdelivr.net/npm/pouchdb@7.2.1/dist/pouchdb.min.js"></script> en el archivo html en lugar de usar pouchdb.js en la carpeta js como la fuente.Esta es también la única fuente que utiliza esta guía oficial de PouchDB en su demostración de tareas pendientes. Esta demostración funcionó perfectamente en mi computadora portátil, pero cuando se trata de mi propia aplicación web, ya no funciona y aún arroja el mismo error.
Otro problema para este método es que incluso si el enlace cdn funcionara y pudiera acceder a pouchdb.min.js, todavía necesito el pouchdb.load.js para poder trabajar, ya que quiero que los datos del archivo JSON se guarden en la bolsa. .
En la guía oficial de PouchDB , ni siquiera incluye esta línea var PouchDB = require('pouchdb'); en su app.js, pero directamente dice var db = new PouchDB('todos'); . Pero cuando intenté hacerlo de esta manera, ocurrió un nuevo error: 'ReferenceError: PouchDB no está definido'.
También probé npm install pouchdb-browser y luego en el archivo js escribí:
var PouchDB = require('pouchdb-browser'); var pouchdb = PouchDB.default.defaults();pero arroja el mismo error asociado con require .
Creo que el problema sigue siendo que las fuentes en el html no pudieron crear esta conexión entre pouchdb.js con mi aplicación web. Mientras tanto, todo parece estar bien cuando seguí la guía oficial para hacer la demostración de todo. ¿Alguna idea de qué pudo haber causado este problema y cómo solucionarlo?
Creo que estás mezclando la programación del lado del cliente y del lado del servidor. No puede hacer "requerir" de forma nativa en el código JavaScript del lado del cliente. Aquí hay un ejemplo muy simple de cómo tomar datos de un formulario y escribirlos en PouchDB local:
<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> Obtiene PouchDB de la CDN; tenga en cuenta que estoy usando https:// en lugar de // como protocolo porque siempre queremos obtener PouchDB usando https, incluso si la página alojada se sirve en http.
Una vez que se carga PouchDB, escribimos el documento en la base de datos de PouchDB utilizando la función de publicación y escribimos la respuesta en la página.