使用Parcel.JS打包接入Firebase的JS应用报require未定义如何解决

• 你将Parcel的打包输出目录和JS源文件目录都设置为了./public/js，Parcel执行打包时会把新生成的bundle.js当作源文件再次扫描处理，混入了仅Node环境支持的require语法，浏览器无法识别该语法所以触发报错。
• 你没有明确指定Parcel的打包目标环境，默认生成的产物可能适配Node环境而非浏览器环境，也会导致出现require语法。

1. 调整打包输出目录，不要和源文件目录重合，避免重复打包问题。将package.json中的脚本修改为：

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

2. 修改index.pug中的引入路径，指向新的打包产物目录：

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

3. 清空原./public/js目录下旧的bundle.js文件，再重新执行npm run watch:js生成新的打包产物即可。
4. 如果你的package.json中配置了"type": "commonjs"，可以删除该配置或者改为"type": "module"，适配浏览器端的ES模块规范。

内容的提问来源于stack exchange，提问作者Chris Clark