Webpack + Firebase:禁用Firebase解析

Question

我正在开发一个使用Webpack捆绑模块的web应用程序。不管出于什么原因，将Firebase引入应用程序导致Webpack抛出了一个错误。当Webpack试图加载Firebase模块时，会发生此错误。

我怎样才能把火基排除在Webpack之外，但我还是可以打电话给他。

import Firebase from 'firebase';

从我的JS文件里？

以下是错误的一些截图。

pic1 pic2

Answer 1

tl；博士将/node_modules/排除在babel装载机路径之外.

第二张图片显示了firebase-web.js:12上的错误

Uncaught TypeError: Cannot read property 'navigator' of undefined

不幸的是，firebase-web.js被缩小，所以很难准确地判断出哪里出了问题。让我们使用美化防火墙-web.js使用http://jsbeautifier.org

​

​

现在可以很清楚地看到，脚本正在尝试访问aa.navigator，但是aa没有定义。你可以看到在文件的顶部

var h, aa = this;

我们可以看到脚本现在要做的事情:它期望this === window，所以它可以访问window.navigator。

但是为什么this没有定义呢？这是因为，在某种程度上，脚本被放入严格模式中，从而导致了this === undefined而不是this === window。我们可以在webpack生成的main.js中看到这一点

​

​

事实证明，"use strict"是由巴贝尔装载机提供的，因此我们应该能够禁用babel-加载程序的firebase-web.js来解决这个问题：

...
module: {
  loaders: [
    {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
  ]
}
...

​

​

很好，现在没有"use strict"了，错误也不再发生了！

(完全公开:我从事的项目与@kashiB正在进行的项目相同，并且可以访问源代码。)