Webpack + Firebase: отключить разбор Firebase

Question

Я работаю над веб-приложением, которое использует Webpack для объединения модулей. По какой-то причине введение Firebase в приложение вызывает ошибку Webpack. Эта ошибка возникает, когда Webpack пытается загрузить модуль Firebase.

Как я могу идти об исключении Firebase из Webpack, но все еще может позвонить

import Firebase from 'firebase';

внутри моих файлов JS?

Вот несколько скриншотов об ошибке.

pic1 pic2

Answer 1

TL; др Исключить /node_modules/ из путей Бабель-погрузчика.

---

Ваш второй рис показывает ошибку на firebase-web.js:12:

Uncaught TypeError: Cannot read property 'navigator' of undefined 

К сожалению, firebase-web.js is minified, так что трудно сказать точно, что происходит не так. Давайте beautify firebase-web.js с помощью http://jsbeautifier.org:

Теперь ясно видно, что скрипт пытается получить доступ к aa.navigator, но aa не определен. Вы можете увидеть at the top of the file:

var h, aa = this; 

Мы можем увидеть, что скрипт пытается сделать сейчас: она ожидает this === window так что он может получить доступ к window.navigator.

Но почему this не определено? Это потому, что в какой-то момент сценарий помещается в strict mode, что вызывает this === undefined вместо this === window. Мы можем видеть, что в WebPack сгенерированных main.js:

Оказывается, что "use strict" идет предваряется по babel-loader, поэтому мы должны быть в состоянии отключить Бабель-загрузчик для firebase- web.js решить эту проблему:

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

Хорошо, теперь больше нет "use strict" и ошибки больше не возникает!

(Полное раскрытие:. Я работал над проектом, который @kashiB работает над и иметь доступ к исходному коду)