Webpack + Firebase:禁用Firebase解析

Question

我正在开发一个使用Webpack捆绑模块的Web应用程序.无论出于何种原因,将Firebase引入应用程序都会导致Webpack抛出错误.Webpack尝试加载Firebase模块时发生此错误.

我如何从Webpack中排除Firebase,但仍然可以调用

import Firebase from 'firebase';

从我的JS文件中？

以下是错误的一些屏幕截图.

pic1 pic2

Answer 1

tl; dr/node_modules/从babel-loader路径中排除.

你的第二张照片显示错误firebase-web.js:12:

Uncaught TypeError: Cannot read property 'navigator' of undefined

不幸的是,firebase-web.js被缩小了,因此很难确切地知道出了什么问题.让我们使用http://jsbeautifier.org 美化firebase-web.js:

现在很明显看到脚本正在尝试访问aa.navigator,但aa未定义.您可以在文件顶部看到:

var h, aa = this;

我们可以看到脚本现在正在尝试做什么:它期望this === window它可以访问window.navigator.

但为什么不this定义？这是因为,在某些时候,脚本被置于严格模式,这导致this === undefined而不是this === window.我们可以在webpack生成的main.js中看到:

事实证明,babel-loader"use strict"正在预先设置,因此我们应该能够为firebase-web.js禁用babel-loader 来解决问题:

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

很好,现在已经没有了"use strict",错误不再发生!

(完全披露:我参与了@kashiB正在进行的同一个项目,并且可以访问源代码.)