Мне потребовалось много времени, чтобы понять эту тему, и я бы хотел, чтобы кто-то написал подобное руководство, когда я учился. Так вот!
ES6 — импорт и экспорт
ES6 в основном используется во фронтенд-разработке. Я использовал его в React. Он не поддерживается (из коробки) в Node.JS.
Есть два способа установить экспорт в ES6 — «экспорт по умолчанию» и «экспорт с именем».
Экспорт по умолчанию
Экспорт по умолчанию объявляется следующим образом: export default SomeThing
. Это экспортирует любую переменную, которую вы назвали SomeThing
. Вы можете использовать только один стандартныйэкспорт для каждого файла.
Чтобы импортировать экспорт по умолчанию, просто используйте следующее: import SomeThing from './path/to/export'
. Чтобы создать псевдоним, вы можете заменить SomeThing
на что угодно — оно не обязательно должно совпадать с экспортом. Это тоже сработает: import MyThingymajig from './path/to/export'
.
Именованные экспорты
Именованные экспорты объявляются следующим образом: export function Xyz() {...}
или export let variable = 2
. Их можно использовать в сочетании с экспортом по умолчанию, и у вас может быть несколько именованныхэкспортов для каждого файла.
Чтобы импортировать именованный экспорт, просто используйте следующее: import { Xyz } from './path/to/export'
. Чтобы создать псевдоним, используйте следующее: import { Xyz as Abc } from './path/to/export'
(обратите внимание на ключевое слово as
). Имя переменной без псевдонима внутри фигурных скобок должно совпадать с именем экспортируемой переменной.
Вы можете импортировать несколько именованных экспортов из одного файла следующим образом: import { Xyz, Yza, Zab } from './path/to/export
. И вы можете пойти еще дальше и объединить их с алиасингом: import { Xyz as Abc, Yza as Bcd, Zab } from './path/to/export
.
Время путаницы: экспорты по умолчанию на самом деле просто именованные экспорты с именем default
. Следовательно, import MyAlias from './path/to/export'
совпадает с import { default as MyAlias } from './path/to/export'
.
Объединение стандартного и именованного экспорта
Оба типа экспорта можно комбинировать, чтобы сделать импорт менее подробным. Вы можете импортировать стандартные и именованные экспорты из одного файла, например: import { Xyz }, SomeThing from './path/to/export’
. И это можно комбинировать с алиасингом: import { Xyz as Abc }, MyThing from './path/to/export’
.
ES5 —module.exports и требуют
ES5 делает вещи немного менее простыми. К сожалению, невозможно использовать импорт ES6 с готовым Node.JS, поэтому большинство придерживается ES5. Полезно помнить, что module.exports
— это либо объект, либо переменная, а это означает, что экспорт по умолчанию и именованный экспорт нельзя использовать вместе.
Экспорт по умолчанию
Экспорт по умолчанию объявляется следующим образом: module.exports = SomeThing
.
Чтобы импортировать экспорт по умолчанию, используйте это: const SomeThing = require('./path/to/export')
. Чтобы создать псевдоним, вам нужно использовать деструктуризацию объекта (не беспокойтесь о красивом слове): const { NewThing: SomeThing } = require('./path/to/export')
.
Именованный экспорт становится немного более запутанным.
Именованный экспорт
Именованные экспорты объявляются следующим образом: module.exports = { ThingOne, ThingTwo }
. Вы можете пойти дальше и переименовать свой экспорт — вот пример, где ThingOne
становится ThingX
: module.exports = { ThingX: ThingOne, ThingTwo }
.
Чтобы импортировать именованный экспорт, используйте это: const ThingX = require('./path/to/export').ThingX
. Чтобы создать псевдоним, сделайте следующее: const StillThingX = require('./path/to/export').ThingX
.
Чтобы импортировать несколько именованных экспортов, используйте это: const { ThingX, ThingTwo } = require('./path/to/export')
. Это считывает свойства ThingX
и ThingTwo
из оператора module.exports
внутри ./path/to/export
(прошу прощения за форматирование кода).
Чтобы импортировать несколько именованных экспортов с псевдонимами, используйте это: const { ThingX, ThingY: ThingTwo } = require('./path/to/export')
. Это импортирует ThingX
как обычно, а ThingTwo
импортирует как ThingY
.
Объединение стандартного и именованного экспорта
Иногда вам может понадобиться объединить экспорт по умолчанию и экспорт с различными именами. Это немного сбивает с толку, так как это технически невозможно с ES5 require
. Экспорт ES5 должен быть либо одним экспортом по умолчанию, либо объектом именованного экспорта.
В ES5 я рекомендую использовать именованный экспорт как можно чаще, так как это немного упростит задачу.