JavaScript: ES6 `import` и `export`

Примеры использования import и export в ES6.

Частичный перевод статьи “Complete Guide For ES6 Import And Export Syntax Changes” с сайта medium.com

С приходом ES6 в JavaScript появилась модульность. Каждый файл теперь может являться модулем и содержать переменные недоступные для других модулей пока мы явно не захотим сделать их доступными. А именно – экспортировать.

Существует 2 типа экспорта:

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

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

Именованных экспортов может быть много в рамках одного модуля.

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

const myVar = 'value';
export myVar;

или

export const myVar = 'value';

Можно экспортировать сразу несколько переменных:

const a = 1;
const b = 2;
export { a, b };

Обратите внимание, что `{ a, b }` это не литерал объекта, поэтому так делать нельзя:

export { a: 1, b: 2 };

Далее, чтобы импортировать переменную из другого модуля, делаем так:

import { a } from './module';

или

import { a, b } from './path/to/module';

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

Если в модуле уже есть переменная с именем `a` и нужно импортировать новую, то можно сделать так:

import { a as c, b as d } from './module'

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

const a = 3.14;
export { a as pi };

Для того чтобы экспортировать переменную – она должна быть определена.

Так работать не будет:

export 'value';

а так правильно:

export const e = 'value';

Порядок переменных при импорте не важен, ровно как и при экспорте.

Если есть такой экспорт:

const a = 1;
const b = 2;
const c = 3;
export { c, a, b }; // порядок произвольный

то импортирование может быть таким:

import { b, c, a } from './module'; // порядок произвольный

или:

import { b } from './module'; // только нужная переменная

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

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

Делается так:

const a = 1;
export default a;

Импорт, в свою очередь, делается так:

import a from './module';

Обратите внимание, что нельзя делать экспорт по-умолчанию в момент инициализации переменной.

Так работать не будет:

export default const a = 1;

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

export default {
  a: 1, // переменная 
  b: arg => arg, // функциональная переменная
  c: {} // объект
}

Импорт вышеуказанного может выглядеть так:

import data from './module';
console.log(data.a); // 1
console.log(data.b(2)); // 2
console.log(data.c); // {}

Можно импортировать сразу все переменные использую wildcard или alias.

Например:

// module.js

export const a = 1;
export const b = 2;

const c = 3;
export default c;

import * as data from './module';

console.log(data.a); // 1
console.log(data.b); // 2
console.log(data.default); // 3

При необходимости можно делать именованный экспорт одновременно с экспортом по-умолчанию.

Например:

const a = 1;
const b = 2;
const c = 3;

export { a, b, c as default };

Похожее можно делать и при импорте:

import c, { a, b } from './module';

Недаюсь данное объяснение поможет вам лучше понять import и export.