【问题标题】：Warning: It looks like you're using the development build of the Firebase JS SDK警告：您似乎正在使用 Firebase JS SDK 的开发版本
【发布时间】：2018-06-05 19:00:54
【问题描述】：

我已将 Firebase 集成到我的 React.js 应用中，如下所示： https://firebase.google.com/docs/database/web/start

火.js：

import firebase from 'firebase'

var config = {
  apiKey: "####",
  authDomain: "#",
  databaseURL: "#",
  projectId: "#",
  storageBucket: "#",
  messagingSenderId: "#"
};
var fire = firebase.initializeApp(config);
export default fire;

应用程序.js：

import fire from './fire';

class App extends Component {
    componentWillMount(){
        let messagesRef = fire.database().ref('messages').orderByKey().limitToLast(100);
    }
}

但现在我在控制台中收到此警告：

您似乎正在使用 Firebase JS 的开发版本开发工具包。将 Firebase 应用部署到生产环境时，建议仅导入您打算使用的各个 SDK 组件。

对于模块构建，这些可以通过以下方式获得（替换为组件的名称 - 即 auth、数据库、等）：

CommonJS 模块： const firebase = require('firebase/app'); 要求('firebase/');

ES 模块：从 'firebase/app' 导入 firebase；导入'firebase/';

如何解决此警告？

我已经尝试（在 fire.js 中）改变这个：

import firebase from 'firebase'

到这里：

import firebase from 'firebase/app'

这会导致此错误：

【问题讨论】：

标签： reactjs firebase

【解决方案1】：

导入firebase的正确方法是这样的：

import firebase from 'firebase/app';
import 'firebase/database'; // If using Firebase database
import 'firebase/storage';  // If using Firebase storage

【讨论】：

当我将导入更改为此警告是否应该消失？我已经更改了它，但仍然收到警告。
@vhflat 在我修复了所有项目文件中的导入语句后，警告消失了。

【解决方案2】：

导入 firebase 并消除警告的正确方法是：

始终以这种方式导入

import firebase from 'firebase/app';

然后根据需要导入每个子模块（每个 firebase 服务）

import 'firebase/auth';        // for authentication
import 'firebase/storage';     // for storage
import 'firebase/database';    // for realtime database
import 'firebase/firestore';   // for cloud firestore
import 'firebase/messaging';   // for cloud messaging
import 'firebase/functions';   // for cloud functions

【讨论】：

您的答案与已经接受的答案有何不同？
initializeApp 怎么样？
@toti08 它为 firebase 的其他子模块添加了导入路径，这对于人们在使用其他 firebase 服务时遇到同样的错误很有用。
多么棒的答案！
我被要求开发的应用程序也不断收到警告。某处是否有所有子模块的列表，以便我可以包含所有子模块？我只是想摆脱愚蠢的警告。

【解决方案3】：

警告信息量很大，并且准确地列出了您需要做的事情。在您的情况下，这就是告诉您切换导入文件的方式的行：

ES 模块：从 'firebase/app' 导入 firebase；导入'firebase/';

在您的fire.js 文件中尝试更改：

import firebase from 'firebase'

到这里：

import firebase from 'firebase/app'

这应该清除它！

旁注：

就我而言，我使用的是firestore，所以我有一个额外的导入，我也从以下位置进行了更改：

import firestore from 'firebase/firestore'

收件人：

import 'firebase/firestore'

【讨论】：

我已经尝试过了，但它会导致上面的错误（请参阅带有附加图像的修改后的问题）。有什么想法吗？
我找到了解决办法
最后，导入的语法是什么？
查看我对我的问题的回答

【解决方案4】：

注意事项：

我仅将 firebase 用于存储，但我仍然需要：

import firebase from "firebase/app"
import "firebase/storage"
import "firebase/auth"

为了避免 OP 中的 webpack 错误。

我在访问存储之前对用户进行了身份验证。虽然我没有使用 firebase 作为我的主要身份验证提供者。

【讨论】：

【解决方案5】：

我也一样。我就是这样解决的。

import firebase from "firebase/app"

我在项目中导入 Firebase 的每个地方都使用了它。这对我有用。

当然，请记住在 Firebase 初始化中使用您需要的服务。

import 'firebase/auth';    
import 'firebase/storage';    
import 'firebase/database';   
import 'firebase/firestore';  
import 'firebase/messaging';  
import 'firebase/functions';

【讨论】：