如何在浏览器代码中搭配Firestore正确导入geofire-common？

两种导入方式的核心差异 #

• CommonJS 规范的 require 是导入模块的全部导出内容，你之前写的 const geofire = require('geofire-common') 是把模块全部导出值赋值给geofire变量，geofire-common 本身采用 CommonJS 规范打包，没有单独命名导出geofire属性，因此使用 ES6 解构命名导入必然报错。
• ES6 规范的 import 分为命名导入和默认导入两类，你使用的import {geofire} from 'geofire-common'属于命名导入，只会匹配模块中明确声明导出的同名变量，找不到对应变量就会抛出你遇到的报错。

浏览器环境正确导入方法 #

有Vite、Webpack等构建工具的ES模块环境 #

优先使用全量导入语法，将模块全部导出内容赋值给geofire变量，和Node端require导入的对象完全一致，后续方法调用不需要做任何修改：

import * as geofire from 'geofire-common';

如果你的构建工具对CommonJS转ES模块的兼容支持默认导入，也可以写成：

import geofire from 'geofire-common';

无构建工具的原生浏览器环境 #

下载geofire-common的UMD格式打包文件到本地项目目录，通过script标签引入本地资源后，geofire会自动挂载为全局变量，可直接调用相关方法：

<script src="./本地存放路径/geofire-common.umd.js"></script>
<script>
  const hash = geofire.geohashForLocation([37.785326, -122.405696]);
</script>

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