Así que estoy tratando de conectar mi aplicación Javascript a Firebase. Entiendo que necesito usar un paquete para hacer esto, y mi método preferido es Parcel.JS. Ejecuto mi script Parcel.JS con el siguiente código en mi archivo package.json:
"main": "./public/js/bundle.js", "scripts": { "watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js",Este es el código en mi archivo index.js:
import { initializeApp } from 'firebase/app'; import { getAnalytics } from 'firebase/analytics'; const firebaseConfig = { apiKey: '', authDomain: '', projectId: '', storageBucket: '', messagingSenderId: '', appId: '', measurementId: '', }; const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app);Parcel.JS lo agrupa en bundle.js como se esperaba, y hago referencia a él en la parte inferior de mi archivo index.pug de la siguiente manera:
script(src='/js/bundle.js')Cuando se carga la página, compruebo la consola en Chrome y veo el siguiente mensaje de error:
Uncaught ReferenceError: require is not defined at bundle.js:1¿Alguien puede decirme qué estoy haciendo mal aquí? Estoy un poco perdido.
Probablemente no quiera usar el campo "main" en package.json . De acuerdo con la documentación , esto está destinado a personas que desarrollan bibliotecas (por ejemplo, paquetes npm que otros consumen), lo que no suena como usted. Específicamente, el campo "main" le dice al paquete que genere un paquete commonjs en esa ubicación, lo que ayudaría a explicar por qué está viendo errores sobre las llamadas require , que no se ejecutarán en el navegador.
Otra posible fuente de problemas es el hecho de que su directorio dist-dir está en la misma ubicación que su fuente js ( ./public/js ) - No he podido probar esto porque npm está inactivo en este momento, pero lo que ¿Piensa que eso podría causar que el paquete sobrescriba sus archivos fuente?
Recomendaría eliminar el campo main de package.json y mover su código fuente a un directorio diferente al --dist-dir .