ES6 - модули

ES6 - модули

Поговорим о ECMAScript 2015

Предыдущий

Обзор

Сегодня у нас есть несколько способов создавать модули, экспортировать и импортировать их. В JavaScript пока нет встроенного загрузчика модулей. Грядущий стандарт ECMAScript 2015 дает нам повод сделать людей счастливыми. Наконец-то ;)

У нас есть стандарты сторонних производителей: CommonJS и AMD. Самые популярные, но, к сожалению, несовместимые стандарты для загрузчиков модулей.

CommonJS известен от Node.js. Он в основном предназначен для серверов и поддерживает синхронную загрузку. Он также имеет компактный синтаксис, ориентированный на ключевые слова export и require.

AMD и самая популярная реализация - RequireJS предназначены для браузеров. AMD поддерживает асинхронную загрузку, но имеет более сложный синтаксис, чем CommonJS.

Целью ES6 было (было) смешать эти два стандарта и сделать счастливыми обе группы пользователей.

ES6 дает нам простой синтаксис и поддержку асинхронной и настраиваемой загрузки модулей.

Асинхронная модель - код не выполняется, пока запрошенные модули не будут доступны и обработаны.

Именованный экспорт

Модули могут экспортировать несколько объектов, которые могут быть простыми переменными или функциями.

export function multiply (x, y) {
  return x * y;
};

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

var multiply = function (x, y) {
  return x * y;
};
export { multiply };

Мы даже можем экспортировать много объектов и, как в приведенном выше примере - мы должны заключить экспортированные операторы в набор фигурных скобок, если мы используем одно ключевое слово экспорта.

export hello = 'Hello World';
export function multiply (x, y) {
  return x * y;
};
// === OR ===
var hello = 'Hello World',
    multiply = function (x, y) {
      return x * y;
    };
export { hello, multiply };

Давайте представим, что у нас есть файл modules.js со всеми экспортированными операторами. Чтобы импортировать их в другой файл (в том же каталоге), мы используем синтаксис… import {..} from ..:

import { hello } from 'modules';

Мы можем опустить расширение .js, как и в CommonJS и AMD.

Мы даже можем импортировать множество операторов:

import { hello, multiply } from 'modules';

Импорт также может иметь псевдоним:

import { multiply as pow2 } from 'modules';

.. и используйте подстановочный знак (*) для импорта всех экспортированных состояний:

import * from 'modules';

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

В нашем модуле у нас может быть много именованных экспортов, но также может быть экспорт по умолчанию. Это потому, что наш модуль может быть большой библиотекой, и при экспорте по умолчанию мы можем импортировать тогда весь модуль. Это также может быть полезно, когда наш модуль имеет одно значение или модель (класс / конструктор).

Один экспорт по умолчанию на модуль.

export default function (x, y) {
  return x * y;
};

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

import multiply from 'modules';
// === OR ===
import pow2 from 'modules';
// === OR ===
...

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

// modules.js
export hello = 'Hello World';
export default function (x, y) {
  return x * y;
};
// app.js
import pow2, { hello } from 'modules';

Экспорт по умолчанию - это просто именованный экспорт со специальным именем по умолчанию.

// modules.js
export default function (x, y) {
  return x * y;
};
// app.js
import { default } from 'modules';

API

Кроме того, есть программный API, который позволяет:

• Программно работать с модулями и скриптами
• Настроить загрузку модуля

SystemJS - универсальный загрузчик динамических модулей - загружает модули ES6, AMD, CommonJS и глобальные скрипты в браузере и на NodeJS. Работает как с Traceur, так и с Babel.

Загрузчик модулей должен поддерживать:

• Динамическая загрузка
• Изоляция глобального пространства имен
• Вложенная виртуализация
• Крючки для компиляции

Следующий

Нравится? Рекомендую!

Вся серия также доступна в виде электронной книги. Я опубликовал это на Leanpub.com

Будущее светлое!