为浏览器代码导入带有 firestore 的 geofire-common

Question

我对在浏览器代码中使用 geofire-common 有点困惑。

一开始，我成功尝试了 NodeJS，它使用 geofire-common 引用 here in the Google documentation，代码如下所示：

import { createRequire } from 'module'; // <------ trick to get a require function
const require = createRequire(import.meta.url);

const { initializeApp, cert } = require('firebase-admin/app');
const { getFirestore } = require('firebase-admin/firestore');

const serviceAccount = require('./serviceAccountKey.json');

initializeApp({
  credential: cert(serviceAccount),
});

const db = getFirestore();
const geofire = require('geofire-common'); //<---------- geofire-common

然后，我想从浏览器端完成这项工作......我偶然发现了this example。在这个例子中，我可以看到一个 'require' 函数，所以我猜它与旧学校的 commonJS 模块有关：

const geofire = require('geofire-common');

Require 不是标准 JavaScript API 的一部分，应该是 NodeJS 特定的（这有点奇怪，因为我认为这个例子是浏览器代码），所以我'我试过使用 ES6 导入..

import {geofire} from 'geofire-common';

...没有成功：

The requested module '/node_modules/.vite/geofire-common.js?v=738ba8db' does not provide an export named 'geofire'

如果周围的一些 JS 专家愿意阐明这 2 个包并帮助我正确导入 geofire 如果可能的话，将不胜感激。

Answer 1

这是一个非常有趣的问题，一旦我进入它，它有点令人困惑，因为 JavaScript 中使用的导入已经改变，并且根据用例存在一些差异。

首先，我们需要知道这个Geofire模块是从哪里来的；你提到了文档和示例，我们可以看到他们使用命令行来 install 这个库：

// Install from NPM. If you prefer to use a static .js file visit
// https://github.com/firebase/geofire-js/releases and download
// geofire-common.min.js from the latest version
npm install --save geofire-common

如您所见，他们正在使用 NPM，这向我们表明这是一个 . This is important because you were confused about the origin and if it was a commonjs module, which it seems to be. This also means it should be called using require, a function and also this cause not to work when using import, which can be used only for ES modules style, as quoted from the node documentation:

require

The CommonJS module require always treats the files it references as CommonJS.

Using require to load an ES module is not supported because ES modules have asynchronous execution. Instead, use import() to load an ES module from a CommonJS module.

然后你问如何在浏览器端运行这段代码，我认为可以使用HTML参考或按照github repo中的建议下载js文件来完成.

Alternatively, you can include GeoFire in your HTML. To do so, download a minified or non-minified version of GeoFire from the releases page of this GitHub repository. Then, deploy it to Hosting in your Firebase project.

<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-database.js"></script>


<script src="https://my-firebase-project.web.app/geofire-5.0.1.min.js"></script>

我还会参考 API Reference 以获得进一步的指导，我可以看到 firebase 页面和 API 参考之间关于如何使用库的一些差异。

最后，在 npm 页面中我们可以看到 geofire 作为 geofire-common 的依赖，并且两者都有相同的 github 存储库，所以我想它还有更多的事情要做与命名。我会说两者基本相同。

Answer 2

我觉得你可以用

import * as geofire from 'geofire-common';

为浏览器代码导入带有 firestore 的 geofire-common

import geofire-common with firestore for browser code

javascript

node.js

geofire

google-cloud-firestore

vite

`require`