webpack导入firebase无法正常工作 [英] webpack import firebase not working

问题描述

我有一个问题让firebase 3.0.1工作。我感觉这是关于我的webpack设置。我的文件在下面。当使用webpack开发服务器运行我的应用程序时，出现以下错误：
$ b

Uncaught TypeError：firebase.initializeApp不是一个函数

$有趣的是，如果我把一个调试器; 或$ $ b> > var firebase = require（'firebase'）; 它似乎是一个空对象。

webpack.config.js

  const webpack = require（webpack）; 
 
 module.exports = {
条目：'./src/index.js'，
输出：{
路径：'public'，
文件名：'bundle.js'
}，
模块：{
加载器：[{
 test：/\.js$/，
 exclude：/ node_modules /，
 loader：'babel-loader？presets [] = es2015& presets [] = react'
}] 
}，
 plugins：process.env.NODE_ENV == ='生产'？ [
 new webpack.optimize.DedupePlugin（），
 new webpack.optimize.OccurrenceOrderPlugin（），
 new webpack.optimize.UglifyJsPlugin（）
]：[] 
}; 
  

package.json

  {
name：burn，
version：1.0.0，
description：burn消息，
main：index.js，
scripts：{
start：if-env NODE_ENV = production&& npm run start：prod || npm run start：dev，
start：dev：webpack-dev-server --inline --content-base public --history-api-fallback，
start： prod：webpack& firebase deploy
}，
author：James Gilchrist< [e-mail];，
license：ISC ，
dependencies：{
compression：^ 1.6.2，
express：^ 4.13.4，
firebase：^ 3.0.1，
if-env：^ 1.0.0，
react：^ 15.0.2，
react-dom：^ 15.0 .2，
react-router：^ 2.4.0
}，
devDependencies：{
babel-core：^ 6.9.0 ，
babel-loader：^ 6.2.4，
babel-preset-es2015：^ 6.9.0，
babel-preset- react：^ 6.5.0，
webpack：^ 1.13.0，
webpack-dev-server：^ 1.14.1
} 
 
  

index.js $ b

  var firebase = require（'firebase'）; 
 $ b $ var config = {
 apiKey：AIzaSyA9gUmSBu4SZ4P9H_4lXuN1ouD_GBKq3aw，
 authDomain：burn-56840.firebaseapp.com，
 databaseURL：https：// burn -56840.firebaseio.com，
 storageBucket：burn-56840.appspot.com
}; 
 firebase.initializeApp（config）; 
  

解决方案

我有同样的问题，但有一个简单的修复：

  var firebase = require（'firebase / app'）; 
  

这样您就可以获得真实的firebase模块。但是，现在您必须要求每个模块都是您需要的，以便正确加载，如下所示：

  var firebase = require（'firebase /应用）; 
 //所有3都是可选的，你只需要在开始时要求它们
 require（'firebase / auth'）; 
 require（'firebase / database'）; 
 require（'firebase / storage'）; 
  

在我看来，目前的初始化代码有问题，看它应该工作的来源;但是再次，有点像你，我使用的是browserify，并没有在它之外测试，所以它可能是相关的。

I'm having an issue getting firebase 3.0.1 to work. I have a feeling it's in regards to my webpack setup. My files are below. When running my app with webpack dev server I get the error:

Uncaught TypeError: firebase.initializeApp is not a function

The interesting thing is that if I put a debugger; or breakpoint after var firebase = require('firebase'); it seems to be an empty object.

webpack.config.js

const webpack = require("webpack");

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'public',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader?presets[]=es2015&presets[]=react'
        }]
    },
    plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ] : []
};

package.json

{
  "name": "burn",
  "version": "1.0.0",
  "description": "burn messaging",
  "main": "index.js",
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline --content-base public --history-api-fallback",
    "start:prod": "webpack && firebase deploy"
  },
  "author": "James Gilchrist <[e-mail]>",
  "license": "ISC",
  "dependencies": {
    "compression": "^1.6.2",
    "express": "^4.13.4",
    "firebase": "^3.0.1",
    "if-env": "^1.0.0",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }
}

index.js

var firebase = require('firebase');

var config = {
    apiKey: "AIzaSyA9gUmSBu4SZ4P9H_4lXuN1ouD_GBKq3aw",
    authDomain: "burn-56840.firebaseapp.com",
    databaseURL: "https://burn-56840.firebaseio.com",
    storageBucket: "burn-56840.appspot.com"
};
firebase.initializeApp(config);

解决方案

I had the same problem, there's a simple fix though:

var firebase = require('firebase/app');

This way you get the "real" firebase module. However you must now require each module you'll need so it loads correctly, like so:

var firebase = require('firebase/app');
// all 3 are optional and you only need to require them at the start
require('firebase/auth');
require('firebase/database');
require('firebase/storage');

It seems to me that something is wrong with the current initialisation code, looking at the source it should work; but then again, somewhat like you, I'm using browserify, and haven't tested outside of it, so it might be related.

这篇关于webpack导入firebase无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！