Webpack + Firebase：禁止分析Firebase [英] Webpack + Firebase: Disable parsing of Firebase

问题描述

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

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

从我的JS文件中从'firebase';

导入Firebase

以下是错误的一些截图。 / file / d / 0B34VIyGG1u-uZndIRVo2MkluU2M / view？usp = sharingrel =nofollow> pic1
：

  var h，aa = this; 
  

我们可以看到脚本现在要做的事情：它期望 this === window ，所以它可以访问预设，所以我们应该能够禁用 firebase-web.js 的babel-loader来解决问题：

 模块：{
加载器：[
 {test：/\.jsx?$/，exclude：/ node_modules /，loader：'babel-loader'} 
 
 
 ... 
  

好，现在有没有更多的使用严格和错误不再发生！

（完全披露：我工作过@kashiB正在开发的项目，并有权访问源代码/ p>

I am working on a web app that uses Webpack to bundle modules. For whatever reason, the introduction of Firebase into the app is causing Webpack to throw an error. This error is occurring when Webpack attempts to load the Firebase module.

How do I go about excluding Firebase from Webpack, but can still call

import Firebase from 'firebase';

from within my JS files?

Here are some screenshots of the error.

pic1 pic2

解决方案

tl;dr Exclude /node_modules/ from the babel-loader paths.

---

Your 2nd pic shows the error on firebase-web.js:12:

Uncaught TypeError: Cannot read property 'navigator' of undefined

Unfortunately, firebase-web.js is minified, so it's hard to tell exactly what's going wrong. Let's beautify firebase-web.js using http://jsbeautifier.org:

Now it's plain to see that the script is trying to access aa.navigator, but aa is undefined. You can see at the top of the file:

var h, aa = this;

We can see what the script is trying to do now: it expects this === window so it can access window.navigator.

But why is this undefined? It's because, at some point, the script is being put into strict mode, which causes this === undefined instead of this === window. We can see that in the webpack-generated main.js:

It turns out that the "use strict" is being prepended by babel-loader, so we should be able to disable babel-loader for firebase-web.js to solve the problem:

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

Good, now there's no more "use strict" and the error no longer occurs!

(Full disclosure: I worked on the same project that @kashiB is working on and have access to the source code.)

这篇关于Webpack + Firebase：禁止分析Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！