JavaScript
Модули

Синтаксис

• import defaultMember из 'module';
• import {memberA, memberB, ...} из 'module';
• import * как модуль из модуля;
• import {memberA как a, memberB, ...} из 'module';
• import defaultMember, * как модуль из «модуля»;
• import defaultMember, {moduleA, ...} из 'module';
• import 'module';

замечания

Экспорт по умолчанию

В дополнение к именованному импорту вы можете предоставить экспорт по умолчанию.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

Вы можете использовать упрощенный синтаксис для импорта экспорта по умолчанию.

import circleArea from './circle';
console.log(circleArea(4));

Обратите внимание, что экспорт по умолчанию неявно эквивалентен именованному экспорту с именем по default , а импортированная привязка ( circleArea выше) является просто псевдонимом. Предыдущий модуль можно записать как

import { default as circleArea } from './circle';
console.log(circleArea(4));

Вы можете иметь только один экспорт по умолчанию для каждого модуля. Имя экспорта по умолчанию может быть опущено.

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

Импорт с побочными эффектами

Иногда у вас есть модуль, который вы хотите импортировать, поэтому его код верхнего уровня запускается. Это полезно для polyfills, других глобалов или конфигурации, которая запускается только один раз, когда ваш модуль импортируется.

Для файла с именем test.js :

console.log('Initializing...')

Вы можете использовать его следующим образом:

import './test'

В этом примере будет отображаться Initializing... на консоли.

Определение модуля

В ECMAScript 6 при использовании синтаксиса модуля ( import / export ) каждый файл становится его собственным модулем с частным пространством имен. Функции и переменные верхнего уровня не загрязняют глобальное пространство имен. Чтобы выставить функции, классы и переменные для других импортируемых модулей, вы можете использовать ключевое слово export .

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

Примечание. Файлы JavaScript ES5, загруженные с помощью тегов <script> , остаются неизменными, если не использовать import / export .

Только те значения, которые явно экспортированы, будут доступны вне модуля. Все остальное можно считать частным или недоступным.

Импорт этого модуля даст (если предыдущий блок кода находится в my-module.js ):

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

Импорт именованных элементов из другого модуля

Учитывая, что модуль из раздела «Определение модуля» существует в файле test.js , вы можете импортировать его из этого модуля и использовать его экспортированные элементы:

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

Метод somethingPrivate() не был экспортирован из test модуля, поэтому попытка его импорта не будет выполнена:

import {somethingPrivate} from './test'

somethingPrivate()

Импорт всего модуля

Помимо импорта именованных членов из модуля или экспорта по умолчанию модуля, вы также можете импортировать все элементы в привязку пространства имен.

import * as test from './test'

test.doSomething()

Все экспортированные члены теперь доступны в test переменной. Неэкспортируемые члены недоступны, так же как они недоступны с имён-импортом.

Примечание . Путь к модулю './test' разрешен загрузчиком и не покрывается спецификацией ECMAScript - это может быть строка для любого ресурса (путь - относительный или абсолютный) в файловой системе, URL-адрес сетевой ресурс или любой другой строковый идентификатор).

Импортирование названных членов с псевдонимами

Иногда вы можете столкнуться с членами, у которых есть действительно длинные имена участников, например thisIsWayTooLongOfAName() . В этом случае вы можете импортировать участника и дать ему более короткое имя для использования в текущем модуле:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Вы можете импортировать несколько длинных имен участников следующим образом:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

И, наконец, вы можете смешивать псевдонимы импорта с обычным импортом участников:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

Экспорт нескольких именованных членов

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }