Экспорт в JavaScript

Что такое export?

Оператор export используется при создании модулей JavaScript для экспорта функций, объектов или примитивных значений из модуля, чтобы они могли использоваться другими программами с оператором import.

Таким образом, в основном он используется в файлах JavaScript, чтобы сделать объекты видимыми для других файлов (модулей).

Есть 3 вида экспорта

1 - Именованный экспорт (несколько на модуль)
2 - Экспорт по умолчанию (по одному на модуль)
3 - Смешанный именованный экспорт и экспорт по умолчанию

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

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

пример lib.js

export function square(x) {
   return x * x
}

это можно использовать в другом файле следующим образом:

main.js

import {square} from 'lib'
var result = square(4)
console.log(result == 16)

Как видите, именованный экспорт затем импортируется в другой скрипт в фигурных скобках.

Примечание. В приведенном выше примере lib.js находится в том же каталоге, что и main.js. В противном случае, если он находится в другом каталоге, путь должен быть относительно текущей папки.
Обратите внимание также на то, что расширение .js опущено в имени файла lib.js при импорте, тем не менее оно относится к файлу.

Скажем, у нас есть следующая структура папок

/
/main.js
/libs/lib.js

в этом случае в main.js оператор импорта должен быть

import {square} from './libs/lib'

В другой статье я объясню, как настроить псевдонимы путей с помощью babel.

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

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

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

lib.js

export default function (x) {
   return x * x
}

Примечание: у функции нет имени и есть ключевое слово default.
Теперь в main.js

import myNameForTheImportedSquareFunction from 'lib'
var result = myNameForTheImportedSquareFunction(4)
console.log(result == 16)

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

Смешанный экспорт

Смешанный экспорт - это не что иное, как использование обоих методов, показанных выше, в одном скрипте.

Просто быстрый пример:

lib.js

export default function (x) {
   return x * x
}
export function square(x) {
   return x * x
}

в main.js мы должны импортировать эти функции следующим образом:

import mySquareFunction, {square} from 'lib'
var squared = square(4)
console.log(squared == 16)
var defaultSquared = mySquareFunction(5)
console.log(defaultSquared == 25)

Еще одна вещь: может быть несколько именованных импортов из одного модуля и только один модуль по умолчанию.

Это правильно

import mySquareFunction, {square, min, max, sum, divide} from 'myMathLib'

Это не правильно

import mySquareFunction, myMin, myMax, {square, min, max, sum, divide} from 'myMathLib'