从Firebase模块仅导入身份验证程序包 [英] Importing only auth package from firebase module

问题描述

此 SO线程着重介绍了您应该如何将独特的Firebase功能导入您的Web应用.

This SO thread highlights how you should import distinct firebase functionality into your web app.

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

In my VueJS SPA, I want to only include firebase/auth into my web app. According to the thread, the following snippet is all that is required.

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

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

Unfortunately, the answers/comments in that thread do not specify where exactly this import needs to go and don't explain any part of the snippet either.

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

I tried adding the above code in my main.js file (the entry point of my app and also where I initialise firebase); however, the entirety of firebase is still bundled into my app after altering my import statements accordingly (as shown below).

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

My question is, where else do I need to include the above snippet in my web app? Do I need to include both import lines every time I import firebase into a Vue component that uses firebase functions?

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

Additionally, I feel like my question stems from a lack of understanding of what's actually happening with the imports. Why do we have to import * as firebase and then import 'firebase/auth'?

此中型帖子还演示了如何导入特定的Firebase程序包，并引用了"tree-shaking"，但没有做进一步解释.阅读摇树" 上的文档可以帮助我理解概念，但不能理解它与firebase示例相关.

This Medium post also demonstrates importing specific firebase packages and references 'tree-shaking' but doesn't explain much further. Reading the docs on 'tree-shaking' helped me understand the concept but not how it works in relation to the firebase example.

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

推荐答案

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

firebase/app is the core firebase client. Everything else is optional services.

使用import firebase from "firebase/app"，您将获得firebase提供的核心功能，这意味着您可能不需要使用firebase/auth，firebase/firestore，firebase/functions，而仅使用应用程序所需的服务，从而减少了您的应用运行所需的代码.

By using import firebase from "firebase/app" You get the core functionality that firebase provides, that means you may not need to use firebase/auth, firebase/firestore, firebase/functions and only use the services that your app requires, reducing the amount of code needed for your app to run.

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

There are a number of ways to import firebase. However, In all of my projects I have a separate firebase file that I import when ever I require to use any firebase service.

示例

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，而您没有 不再需要显式设置它.

The timestampsInSnapshots setting now defaults to true and you no longer need to explicitly set it.

这篇关于从Firebase模块仅导入身份验证程序包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！