Как организовать импорт firebase в файлах?

Question

[MaryChentsova]

Всем приветики :3

Ребятушки, такой вопрос, а как сделать так, чтобы в один файл я могла импортировать firebase и инициализировать его, а потом в другие при надобности переносить его функции? Пользуюсь Webpack 4 :)

При попытке сделать подобное наталкиваюсь на ошибки :(

В главном файле firebase.js есть

import * as firebase from "firebase/app"
import "firebase/auth";
import "firebase/database";

firebase.initializeApp(config);
export var auth = firebase.auth();

И в этом файлике при попытке console.log(auth) всё замечательно работает! :)

Но при попытке получить доступ к auth из другого файла наталкиваюсь на ошибку:

Failed to resolve module specifier "firebase/app" . Relative references must start with either "/", "./", or "../".

И она исчезает только тогда, когда я сделаю bundle, но в таком случае каждый такой bundle весит около 1 мгб :(

Как с этим быть? Подскажите пожалуйста! :3

Answer 1

[bqio]

import * as firebase from "firebase/app"
import "firebase/auth";
import "firebase/database";

firebase.initializeApp(config);
export default firebase.auth();

import Auth from "./firebase";

Comments

[MaryChentsova]

Спасибо за ответ :3

Сделала в точности также однако браузер выдал ошибку:

http://localhost:3000/js/firebase net::ERR_ABORTED 404 (Not Found)

Переделала import Auth from "./firebase"; в import Auth from "./firebase.js";, но теперь браузер снова выдает:

TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".

Сколько же я уже намаялась с этим пунктом...

[bqio]

Вы подключаете Firebase как статику?

[MaryChentsova]

altemuller, да, я установила через npm firebase, app и auth.
Потом подключила их в основной скрипт статически, как Вы могли видеть выше.
Теперь я пытаюсь по отдельности брать нужные мне функции на отдельные страницы, но что-то не выходит. :(
И даже когда выполняю билд firebase.js, всё равно выходит эта ошибка
Может это пригодится, но вот мой вебпак

const path = require("path");

module.exports = {
  entry: "./src/js/firebase.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "src/js")
   },
    mode: 'production',
    devServer: {
         contentBase: path.join(__dirname, 'source/'),
     port: 3000
  }
}

[bqio]

MaryChentsova, что же Вы так любите себе работу усложнять. Обычно, когда Firebase подключается через NPM, в статике его также подключать не надо.

Почитайте еще раз этот гайд: https://firebase.google.com/docs/web/setup

[MaryChentsova]

altemuller, Видимо я Вас неверно поняла, но я делала всё именно по инструкции "using-module-bundlers".
То есть установила npm firebase, а потом сделала импорт, как и писала выше.
Как при таком положении дел получить, допустим, auth, в другом JS файле, при этом не увеличив его в размерах? Извините, если как-то неправильно изложила мысль и ввела Вас в заблуждение!