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

Question

该SO线程重点介绍了如何将独特的Firebase功能导入Web应用程序。

在我的VueJS SPA中，我只想在我的Web应用程序中包含firebase / auth。根据线程，以下所有片段都是必需的。

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

不幸的是，该线程中的答案/评论没有指定此导入操作的确切位置，也没有说明代码段的任何部分。

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

我的问题是，我的网络应用程序中还需要在哪里包含上述代码段？每次将Firebase导入使用Firebase函数的Vue组件时，都需要同时包括两个导入行吗？

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

这篇中级帖子还演示了如何导入特定的Firebase程序包，并引用了“摇树”，但没有做进一步解释。阅读有关“摇树”的文档可以帮助我理解该概念，但不能理解它与Firebase示例相关的工作方式。

注意，我目前正在使用Webpack v3.6.0作为捆绑程序。

Answer 1

firebase/app是Firebase的核心客户端。其他所有内容都是可选服务。

通过使用import firebase from "firebase/app"你得到的核心功能是提供火力点，这意味着你可能不需要使用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