如何使用 ES6 语法将 Firebase Firestore 导入 create-react-app 项目

Posted

技术标签:

【中文标题】如何使用 ES6 语法将 Firebase Firestore 导入 create-react-app 项目【英文标题】:How to import Firebase Firestore into a create-react-app project using ES6 syntax 【发布时间】:2018-08-05 07:16:31 【问题描述】:

我无法让 Firebase Firestore 使用基本的 create-react-app 样板。有人有工作样本吗?

Get Started 文档仅说明了如何使用 require 语句进行设置,而我想使用 ES6 导入。

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

require('firebase/firestore') 的 ES6 等价物是什么?

【问题讨论】:

【参考方案1】:

我遇到了同样的问题,我通过将 firebase 版本降级到 7 解决了这个问题。

"firebase": "^7.7.0"

【讨论】:

【参考方案2】:

这对我有用。

确保您已安装 npm install --save firebase

导入'firebase/firestore';

【讨论】:

【参考方案3】:

这对我有用:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/datastore';

来自https://github.com/firebase/reactfire#using-the-firebase-js-sdk-in-react

【讨论】:

也适合我。【参考方案4】:

两个月后,这对我有用:

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"
    ,
    ...

我开始关注instructions on npmjs.com for the firebase package。在它的依赖项中,我找到了@firebase/firestore,并尝试按照这些说明进行操作,这些说明说要像这样导入:

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

但是,这种导入 firebase 的方法对我不起作用——我能够初始化我的应用,但尝试执行 firebase.auth().signInWithPopup(provider) 导致错误:

TypeError: WEBPACK_IMPORTED_MODULE_0__firebase_app.default.auth 是 不是函数

【讨论】:

【参考方案5】:

我的问题是我试图使用 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');

我不喜欢混合使用 importrequire,但现在已经足够了。

【讨论】:

【参考方案6】:

我为 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
    
;

【讨论】:

感谢您的回复,但我正在寻求有关设置新的Firebase Firestore(目前处于测试阶段)的帮助。您的配置似乎没有引用 Firestore。

以上是关于如何使用 ES6 语法将 Firebase Firestore 导入 create-react-app 项目的主要内容,如果未能解决你的问题,请参考以下文章

如何从 Firebase 加载孩子

如何使用 Firebase 从我的服务器发送 iOS 推送通知?

如何从 Firebase 检索数据到 ListView(使用自定义数组适配器)

如何使用命令行部署 Firebase 数据库安全规则?

如何更改 Firebase-ui 语言?

如何从 firebase_auth 测试“signInWithEmailAndPassword”