如何使用ES6语法将Firebase Firestore导入创建-反应性-应用程序项目

Question

我很难让Firestore与基本的创建-反应应用程序样板一起工作。有人有工作样本吗？

开始文档只解释了如何使用require语句设置它，而我希望使用ES6导入。

const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");

ES6与require('firebase/firestore')的等价性是什么

Answer 1

我的麻烦在于我试图使用ES6语法。Firebase文档说要通过这样的方式访问它：

const firebase = require('firebase');
require('firebase/firestore');

而我想做这样的事：

import * as Firebase from 'firebase';
import Firestore from 'firebase/firestore';

这似乎不起作用，但确实是这样的：

import * as Firebase from 'firebase';
require('firebase/firestore');

我不喜欢把import和require混在一起，但现在已经足够好了。

Answer 2

两个月后，这件事对我很管用：

import * as firebase from 'firebase';
import '@firebase/firestore';

(它也可以不使用“@”。)

下面是我的package.json中的依赖项部分：

{
    ...
    "dependencies": {
        "@firebase/app": "^0.2.0",
        "@firebase/firestore": "^0.4.1",
        "firebase": "^4.13.1",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-scripts": "1.1.4"
    },
    ...
}

我开始跟随关于firebase包的npmjs.com说明。在它的依赖项中，我找到了@firebase/消防站，并尝试按照以下说明进行导入：

import firebase from '@firebase/app';
import '@firebase/firestore'

然而，这种导入firebase的方法对我无效--我能够初始化我的应用程序，但是试图执行firebase.auth().signInWithPopup(provider)导致了一个错误：

WEBPACK_IMPORTED_MODULE___firebase_app.default.auth不是一个函数

Answer 3

我为firebase创建了一个配置文件：

import * as firebase from 'firebase';

const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    apiKey: "apiKey",
    authDomain: "domen.firebaseapp.com",
    databaseURL: "https://domen.firebaseio.com",
    projectId: "lavs-mercury",
    storageBucket: "",
    messagingSenderId: "id"
};

export default firebase.initializeApp(config);

然后将这个模块导入到我想要使用的文件中。例如：

import * as actionTypes from './actionTypes';
import firebase from "../../firebase-module";

export const logout = () => {
    firebase.auth().signOut();
    return {
        type: actionTypes.LOGOUT
    }
};