Понимание импорта / экспорта в ES6 с цепочкой файлов

Question

У меня возникли проблемы с пониманием механизма экспорта / импорта, когда у меня есть 3 файла, каждый из которых включает в себя предыдущий.

Пример:

//fileA.js:
export default MyClass {}

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';

Я ожидаю, чтоMyClass тогда доступно в fileC, но похоже, что это просто не тот случай.Вы можете посоветовать?

Answer 1

Когда вы импортируете такой модуль:

//fileC.js:
import './fileB.js';

, он фактически не импортирует никаких значений.Он выполнит глобальный код в этом модуле для побочных эффектов, но не импортирует сами значения.Чтобы сделать то, что вы хотите, вам нужно будет импортировать значения модулей в каждый файл, который вы хотите использовать.

См. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only

Answer 2

В вашем следующем коде:

//fileA.js:
export default MyClass {}

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';

Myclass будет доступно только в fileB, потому что это напрямую импортирует это.Ваша 3-я строка кода не собирается загружаться в файл A.Тот факт, что FileA загружен в FileB, не означает, что зависимость передается, когда мы импортируем B в FileC

. Чтобы сделать его доступным, мы должны импортировать его снова в файл C, как мы это делали в файле B:

import MyClass from './fileA.js';

Другой import export синтаксис:

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

export class1 {}

export class2 {}

Мы экспортируем 2 класса, мы могли бы импортировать их, используя следующий синтаксис:

import {class1, class2} from './fileA.js';

Имейте в виду, что имена теперь должны совпадать с именами экспорта, class1и class2 в этом случае.

Мы также можем импортировать все экспорты файла следующим образом:

import * as classes from './fileA.js';

classes.class1 // the way to access class1

Этот синтаксис помещает все экспорты в объект, имя которого мы можем определить (после as ключевое слово).Затем мы можем получить доступ к экспорту, как мы обычно обращаемся к свойствам объекта.

Answer 3

Сделайте как ниже:

//fileA.js:
export default MyClass {}

//fileB.js:
export { default as MyClass } from './fileA'

//fileC.js:
import { MyClass } from './fileB'