Модули ES6 и как использовать импорт и экспорт в JavaScript
В 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';