如何使用 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');
我不喜欢混合使用 import
和 require
,但现在已经足够了。
【讨论】:
【参考方案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 从我的服务器发送 iOS 推送通知?