Модули ES6: импорт и экспорт в JavaScript

Development, Java | Amber | Комментировать запись

ES2015 (ES6) поставляется со встроенной поддержкой модулей в JavaScript. Как и в CommonJS, здесь каждый файл представляет собой отдельный модуль. Чтобы объекты, функции, классы или переменные стали доступными в сети, достаточно просто экспортировать их, а затем импортировать туда, где они необходимы, в другие файлы. Angular 2 интенсивно использует модули ES6, поэтому тем, кто работал с Angular, синтаксис будет хорошо знаком. В целом синтаксис довольно прост.

Экспорт

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

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module
export function myLogger() {
console.log(myNumbers, animals);
}
export class Alligator {
constructor() {
// ...
}
}

Также вы можете экспортировать необходимые элементы с помощью одного оператора в конце модуля:

export { myNumbers, myLogger, Alligator };

Экспорт с псевдонимом

Вы также можете присвоить экспортированным элементам псевдонимы. Это делается с помощью ключевого слова as:

export { myNumbers, myLogger as Logger, Alligator }

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

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

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle'];
export default function myLogger() {
console.log(myNumbers, pets);
}
export class Alligator {
constructor() {
// ...
}
}

Импорт

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

import { myLogger, Alligator } from 'app.js';

Импорт с псевдонимом

Вы также можете использовать псевдонимы элементов в импорте:

import myLogger as Logger from 'app.js';

Импорт всех экспортированных элементов

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

import * as Utils from 'app.js';

Это позволяет получить доступ к элементам с точечной нотацией:

Utils.myLogger();

Импорт модуля с элементом по умолчанию

При импорте элемента по умолчанию вы присваиваете ему имя по вашему выбору. В следующем примере Logger – это имя, данное импортированному элементу по умолчанию:

import Logger from 'app.js';

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

import Logger, { Alligator, myNumbers } from 'app.js';