Параметри експорту модуля 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 yпорівнянні зimport {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

ти найкращий
зок

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.