Как безымянный импорт и экспорт работают в JS

Question

Мы изучали Firebase и как связать его с React. Позже я увидел фрагмент этого кода:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

Я столкнулся с некоторой путаницей в приведенном выше коде, поэтому хотел задать один вопрос. Во-первых, как это возможно, что

import 'firebase/firestore';
    import 'firebase/auth';

автоматически подключается к переменной firebase, то есть, используя firebase, мы получаем доступ к app, firestore и auth, поскольку импорт firestore и auth не имеет имени

Answer 1

import 'firebase/firestore';

Это означает "запустить код в firebase / firestore, и мне все равно, экспортирует ли он что-нибудь"; Код, который он выполняет, это этот файл здесь , и часть того, что делает этот код, импортирует firebase из @firebase/app и регистрируется в нем. Вы импортируете тот же самый объект firebase, поэтому все, что было добавлено к этому объекту, доступно и вам.

Строки кода, которые они используют для добавления firestore в firebase, таковы:

export function registerFirestore(instance: FirebaseNamespace): void {
  configureForFirebase(instance);
  instance.registerVersion(name, version);
}

registerFirestore(firebase);

Чтобы понять, что именно они делают, потребуется пройтись по их кодовой базе, чтобы увидеть, что вызывается ( это заканчивается в этой функции ), но я могу продемонстрировать упрощенный эквивалент, подобный этому:

// File 1, the equivalent of firebase/app
export default {}; // no properties on it.

// File 2, the equivalent of firebase/firestore
import firebase from 'firebase/app'

// mutating the object that was imported
firebase.firestore = "I'm firestore!";

// Your file
import firebase from 'firebase/app';
import 'firebase/firestore';

console.log(firebase.firestore); // logs out "I'm firestore!", because the second import added a property to the object.