firebase - Webpack + Firebase：禁用对 Firebase 的解析

Question

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

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

import Firebase from 'firebase';

从我的 JS 文件中？

这是错误的一些屏幕截图。

图 1 图2

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 正在从事的同一个项目，并且可以访问源代码。）