Modern JS Cheatsheet / Памятка по современному JavaScript: Импорт / экспорт

### Импорт / экспорт

Tomatoknight 02.10.17 в 18:11

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

Tomatoknight 02.10.17 в 18:18

Крайне рекомендую почитать ресурсы MDN об экспорте/импорте (см. внешние ресурсы ниже), в них содержится четкая и полная информация.

Tomatoknight 02.10.17 в 18:23

#### Объяснение с примером кода

Tomatoknight 02.10.17 в 18:23

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

Tomatoknight 02.10.17 в 18:23

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

Tomatoknight 02.10.17 в 18:26

```js
// mathConstants.js
export const pi = 3.14;
export const exp = 2.7;
export const alpha = 0.35;
// -------------

Tomatoknight 02.10.17 в 18:26

// myFile.js
import { pi, exp } from './mathConstants.js'; // Именованный импорт -- с синтаксисом, похожим на деструктуризацию
console.log(pi) // 3.14
console.log(exp) // 2.7
// -------------

Tomatoknight 02.10.17 в 18:26

// mySecondFile.js
import * as constants from './mathConstants.js'; // Все экспортированные значения записываются в переменную constants
console.log(constants.pi) // 3.14
console.log(constants.exp) // 2.7
```

Tomatoknight 02.10.17 в 18:27

- Импорт / экспорт по умолчанию

Tomatoknight 02.10.17 в 18:27

Экспорт по умолчанию может быть только один на каждый модуль. Это может быть функция, класс, объект или что-то еще. Это значение считается "главным", поскольку его будет проще всего импортировать [Ссылка: MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Description)

Tomatoknight 02.10.17 в 18:29

```js
// coolNumber.js
const ultimateNumber = 42;
export default ultimateNumber;
// ------------

Tomatoknight 02.10.17 в 18:30

// myFile.js
import number from './coolNumber.js';
// В переменную number автоматически попадает экспорт по умолчанию - вне зависимости от его имени в исходном модуле.
console.log(number) // 42
```

Tomatoknight 02.10.17 в 18:31

Экспорт функций:

Tomatoknight 02.10.17 в 18:31

```js
// sum.js
export default function sum(x, y) {
return x + y;
}
// -------------

Tomatoknight 02.10.17 в 18:31

// myFile.js
import sum from './sum.js';
const result = sum(1, 2);
console.log(result) // 3
```

Tomatoknight 02.10.17 в 18:32

#### Внешние ресурсы

Tomatoknight 02.10.17 в 18:32

- [Экспорт - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)
- [Импорт - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
- [Понимание модулей в ES6](https://www.sitepoint.com/understanding-es6-modules/)
- [Модули в JavaScript](http://exploringjs.com/es6/ch_modules.html#sec_modules-in-javascript)

Tomatoknight 02.10.17 в 18:32