在我的 Javascript 应用程序上设置 Firebase 时，我可以使用 Parcel.JS 捆绑器吗？答案

【问题标题】：Can I use the Parcel.JS bundler when setting up Firebase on my Javascript application?在我的 Javascript 应用程序上设置 Firebase 时，我可以使用 Parcel.JS 捆绑器吗？
【发布时间】：2021-10-07 16:16:36
【问题描述】：

所以我正在尝试将我的 Javascript 应用程序连接到 Firebase。我知道我需要使用捆绑器来执行此操作，我首选的方法是 Parcel.JS。我在 package.json 文件中使用以下代码运行 Parcel.JS 脚本：

  "main": "./public/js/bundle.js",
  "scripts": {
    "watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js",

这是我的 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 按预期将其捆绑到 bundle.js 中，我在 index.pug 文件的底部引用它，如下所示：

script(src='/js/bundle.js')

当页面加载时，我在 Chrome 中检查控制台并看到以下错误消息：

Uncaught ReferenceError: require is not defined
    at bundle.js:1

谁能告诉我我在这里做错了什么？我有点迷茫。

【问题讨论】：

您收到的错误是因为您没有在 bundle.js 文件的第 1 行定义某些内容。

标签： javascript firebase parceljs

【解决方案1】：

您可能不想在package.json 中使用"main" 字段。根据the documentation，这适用于开发库的人（例如，被其他人使用的 npm 包），这听起来不像你。具体来说，"main" 字段告诉 parcel 在该位置输出一个 commonjs 包，这将有助于解释为什么您会看到有关 require 调用的错误，该调用不会在浏览器中运行。

另一个可能的问题来源是您的dist-dir 目录与您的源js (./public/js) 的位置相同 - 我无法对此进行测试，因为 npm 目前已关闭，但我认为这可能会导致 parcel 覆盖您的源文件？

我建议从package.json 中删除main 字段并将您的源代码移动到与--dist-dir 目标不同的目录。

【讨论】：