从Firebase模块仅导入身份验证软件包

Question

此SO thread重点介绍了如何将独特的Firebase功能导入到Web应用中。

在我的VueJS SPA中，我只想在我的Web应用程序中包含firebase / auth。根据线程，下面的代码段就足够了。

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

不幸的是，该线程中的答案/注释没有指定此导入的确切位置，也没有解释代码段的任何部分。

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

我的问题是，在我的Web应用程序中还需要把上面的代码片段包括在内吗？每次将Firebase导入使用Firebase函数的Vue组件时，是否都需要同时包括 导入行？

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

此Medium post还演示了如何导入特定的Firebase程序包并引用“摇树”，但没有做进一步解释。阅读'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