Поиск по сайту:

Модули 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';