Модули

Модули

Модули в ES6
Модулем считается файл с кодом. В этом файле ключевым словом export помечаются переменные и функции, которые могут быть использованы снаружи. Другие модули могут подключать их через вызов import
Целью модулей es6 было создание формата, удобного как для пользователей CJS, так и для пользователей AMD. В связи с этим они имеют такой же компактный синтаксис, как и модули CJS. С другой стороны, они не такие динамичные как и AMD

Особенности
На этапе компиляции возникнет ошибка, если попытаться импортировать что-то, что не было предварительно экспортировано
Можно легко осуществить асинхронную загрузку модулей
Декларативный синтаксис (для импорта и экспорта)
Программная загрузка (чтобы задать конфигурацию загрузки модулей и для условной загрузки модулей)

Пример
При запуске в chrome видим ошибку Uncaught SyntaxError: Unexpected token import. Слабая поддержка браузеров. Необходимо использовать babel.js либо аналогичный инструмент
// lib/math.js
export function sum (x, y) { return x + y; }
export var pi = 3.141593;
// index.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));
// other.js
import { sum, pi } from "lib/math";
console.log("2π = " + sum(pi, pi));

Export
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN;//или var, const
export let name1 = …, name2 = …, …, nameN;//или var, const
export default выражение;
export default function (…) { … } //или class, function*
export default function name1(…) { … } //или class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

Export переменных
возможно перед объявлением переменных, функций и классов
возможно отдельно, при этом в фигурных скобках указывается то, что именно экспортируется
export let one = 1;
let two = 2;
export {two};
export {one, two};

Ключевое слово AS
При AS можно указать, что переменная one будет доступна снаружи (экспортирована) под другим именем .
Пример:
export {one as once, two as twice};

Export функций и классов
export class User {
constructor(name) {
this.name = name; }
};
export function sayHi() {
console.log("Hello!");
};
//export {User, sayHi}

Экспорт по умолчанию
Иногда модуль экспортирует только одно значение (класс). В таком случае удобно определить это значение как экспортируемое по умолчанию
//user.js
export default class User {
constructor(name) {
this.name = name;
}
};
//login.js:
import User from './user';
new User("Петя");

Import
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
Другие модули могут подключать экспортированные значения при помощи ключевого слова import

Пример
//nums.js:
export let one = 1;
export let two = 2;
//1.js
import {one, two} from "./nums";
console.log(`${one} and ${two}`);//1 and 2
//2.js
//использование as
//импорт one под именем item1, а two – под именем item2
import {one as item1, two as item2} from "./nums";
console.log(`${item1} and ${item2}`);//1 and 2

Импорт всех значений в виде объекта
import * as numbers from "./nums";
//теперь экспортированные переменные - свойства numbers
console.log(`${numbers.one} and ${numbers.two}`);//1 and 2

Встроенные модули
//ES5
<br> (function () { <br> /*начало самовызывающейся функции*/<br> var tmp =</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Встроенные модули //ES5 (function () { /*начало самовызывающейся функции*/ var tmp =" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/866586/slide-13.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/866586/slide-13.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/866586/slide-13.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/866586/slide-13.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/866586/slide-13.jpg"><!----><div class="slides-content">100; <br>//не станет глобальной<br> }()); <br>//конец самовызывающейся<br>//функции<br>
//ES6
<br> module { <br>/*анонимный внутренний модуль*/<br> let tmp = 100; <br>//не станет глобальной<br> }<br>

Импорт модулей и загрузка скриптов
System.import(['module1', 'module2'],
function (module1, module2) { //успешное выполнение … },
function (err) { //ошибка … } );