从 firebase 模块仅导入 auth 包

Question

SO thread 重点介绍了应如何将不同的 firebase 功能导入网络应用程序。

在我的 VueJS SPA 中，我只想将 firebase/auth 包含到我的 Web 应用程序中。根据线程，以下 sn -p 就是所需要的。

import * as firebase from 'firebase/app';
import 'firebase/auth';

不幸的是，该线程中的答案/cmets 没有具体说明这个导入需要去哪里，也没有解释 sn-p 的任何部分。

我尝试在我的 main.js 文件（我的应用程序的入口点以及我初始化 firebase 的位置）中添加上述代码；但是，在相应地更改了我的导入语句后，整个 firebase 仍然捆绑到我的应用程序中（如下所示）。

我的问题是，我的网络应用程序中还需要在哪里包含上述 sn-p？每次将 firebase 导入使用 firebase 功能的 Vue 组件时，是否需要包含 both 导入行？

此外，我觉得我的问题源于对进口实际发生的情况缺乏了解。 为什么我们必须先import * as firebase，然后再import 'firebase/auth'？

这个Medium post 还演示了导入特定的firebase 包和引用“tree-shaking”，但没有进一步解释。阅读 'tree-shaking' 上的文档帮助我理解了这个概念，但没有理解它与 firebase 示例的关系。

注意，我目前使用 Webpack v3.6.0 作为我的打包工具。

Answer 1

firebase/app 是核心 firebase 客户端。其他一切都是可选服务。

通过使用import firebase from "firebase/app"，您可以获得firebase 提供的核心功能，这意味着您可能不需要使用firebase/auth、firebase/firestore、firebase/functions，而只使用您的应用需要的服务，从而减少运行您的应用所需的代码。

有多种方法可以导入 firebase。但是，在我的所有项目中，我都有一个单独的 firebase 文件，当我需要使用任何 firebase 服务时，我会导入该文件。

例子

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";
import "firebase/storage";
import "firebase/messaging";
import "firebase/database";

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  messagingSenderId: "",
  projectId: "",
  storageBucket: ""
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const firestore = firebase.firestore();
firestore.settings({ timestampsInSnapshots: true });
firestore.enablePersistence({ experimentalTabSynchronization: true });


export { firebase };

并使用以下导入

import { firebase } from "path/to/file"

更新

experimentalTabSynchronization 已被弃用，请改用synchronizeTabs。

timestampsInSnapshots 设置现在默认为 true，而您没有 不再需要显式设置。