web-dev-qa-db-fra.com

Options d'exportation du module javascript ES6 +

J'ai vu des exportations publiques de modules ES6 effectuées de l'une des manières suivantes:

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

// method 2
export default function () { return 'forty two'; };
  1. Les deux sont-ils valables?
  2. Si oui, pourquoi les deux existent-ils?
  3. Existe-t-il d'autres options valides pour les exportations de modules utilisant la syntaxe ES6?

Je suis surpris que je n'ai pas été en mesure de trouver la réponse avec mon googlefu. Je suis concerné seulement avec les modules ES6, pas CommonJS, RequireJS, AMD, Node, etc.

javascriptsyntaxmoduleexportecmascript-6
80
kdbanman

Un an et quelques années plus tard, voici la meilleure information que j'ai trouvée sur le sujet.

Il existe 4 types d'exportations. Voici des exemples d'utilisation de chacun, ainsi que des importations qui les utilisent:

Syntaxe d'exportation

// 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";

Syntaxe d'importation

// 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";

Source.

173
kdbanman

Les deux sont valables.

La méthode 1 fournit des exportations nommées . La clé ici est que vous pouvez exporter plus d’une chose. Cela devrait être utilisé au lieu d'exporter un objet avec plusieurs propriétés. Lorsque vous importez un module avec des exportations nommées, utilisez import {a, b} from c.

La méthode 2 fournit l'exportation par défaut . Il ne peut y avoir qu'une seule exportation par défaut. Ceci est principalement utilisé lorsque vous exportez une seule chose, comme un class ou un seul function que vous vous attendez à utiliser sans aucun support supplémentaire. Lorsque vous importez un module avec une exportation par défaut, utilisez import d from c.

Notez que vous pouvez utiliser les deux! donc si vous avez une fonction principale majeure avec une poignée d’aides occasionnellement utilisées, vous pouvez export les aides, et export default le primaire. Lorsque vous importez un module et que vous avez besoin des deux types d’exportations, utilisez import d, {a, b} from c.

Une autre option est que vous pouvez obtenir des exports nommés en les listant à la fin de votre module, comme suit: export {a,b,c}. Vous pouvez également les renommer export {a as $a, b as c}.

J'ai tout cela de cet article , qui est la meilleure source d'informations de module es6 à jour que j'ai pu trouver.

39
Sean McMillan
  1. Les deux sont-ils valables?

Non, export function () { return answer; }; n'est pas valide, vous utilisez par défaut ou vous ajoutez un nom à cette déclaration de fonction.

  1. Si oui, pourquoi les deux existent-ils?

Ils ne le font pas :)

  1. Existe-t-il d'autres options valides pour les exportations de modules utilisant la syntaxe ES6?

Vous pouvez voir beaucoup d'options valables ici: https://github.com/eslint/espree/pull/4

3
caridy