Параметры экспорта модуля ES6 + javascript


82

Я видел публичный экспорт модулей ES6, выполненный двумя из следующих способов:

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };
  1. Оба они действительны?
  2. Если да, то почему они оба существуют?
  3. Существуют ли другие допустимые варианты экспорта модулей с использованием синтаксиса ES6?

Я удивлен, что не смог найти ответ с помощью своего googlefu. Меня интересуют только модули ES6, а не CommonJS, RequireJS, AMD, Node и т. Д.


2
Думаю, разница в import x from yvsimport {x} from y
elclanrs

Ответы:


180

Спустя год, вот лучшая информация, которую я нашел по этому поводу.

Есть 4 вида экспорта. Вот примеры использования каждого из них, а также некоторые импортированные данные, которые их используют:

Синтаксис экспорта

// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

Синтаксис импорта

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";

// just import
import "foo";

Источник.


9
Отличный список, но можете ли вы подробнее рассказать о том, что делает каждый тип и в чем разница?
Дэн Даскалеску

2
Отличная идея. Я хочу быть исчерпывающим с каждым объяснением, но я давно не касался ES6, так что я немного заржавел. Придется подождать, пока я вернусь на землю ES6, чтобы я мог быть уверен в том, о чем говорю.
kdbanman

ты лучший
zok

40

Оба они действительны.

Метод 1 предоставляет именованный экспорт . Ключевым моментом здесь является то, что вы можете экспортировать больше чем одну вещь. Это следует использовать вместо экспорта объекта с несколькими свойствами. Когда вы импортируете модуль с именованным экспортом, используйте import {a, b} from c.

Метод 2 обеспечивает экспорт по умолчанию . По умолчанию может быть только один экспорт. Это в основном используется, когда вы экспортируете одну вещь, например class, или одну, functionкоторую вы ожидаете использовать без какой-либо дополнительной поддержки. Когда вы импортируете модуль с экспортом по умолчанию, используйте import d from c.

Обратите внимание, что вы можете использовать оба! так что, если у вас есть основная, основная функция с горсткой иногда используемых помощников, вы можете exportиспользовать помощники и export defaultосновной. Когда вы импортируете модуль и нуждаетесь в обоих видах экспорта, используйте import d, {a, b} from c.

Еще один вариант , который вы можете получить по имени экспорта путем перечисления их в конце модуля, например , так: export {a,b,c}. Вы также можете переименовать их export {a as $a, b as c}.

Я получил все это из этой статьи , которая является лучшим источником последней информации о модуле es6, которую мне удалось найти.


3
  1. Оба они действительны?

Нет, export function () { return answer; };недействительно, либо вы используете значение по умолчанию, либо добавляете имя к объявлению этой функции.

  1. Если да, то почему они оба существуют?

Они этого не делают :)

  1. Существуют ли другие допустимые варианты экспорта модулей с использованием синтаксиса ES6?

Здесь вы можете увидеть множество допустимых вариантов: https://github.com/eslint/espree/pull/43

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.