Opciones de exportación del módulo ES6 + javascript


82

He visto exportaciones públicas de módulos ES6 realizadas de las siguientes maneras:

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

// method 2
export default function () { return 'forty two'; };
  1. ¿Son ambos válidos?
  2. Si es así, ¿por qué existen ambos?
  3. ¿Existen otras opciones válidas para la exportación de módulos utilizando la sintaxis ES6?

Me sorprende no haber podido encontrar la respuesta con mi googlefu. Estoy preocupado solamente con módulos ES6, no CommonJS, RequireJS, AMD, Nodo, etc.


2
Creo que la diferencia es import x from yvsimport {x} from y
elclanrs

Respuestas:


180

Un año y más tarde, aquí está la mejor información que he encontrado sobre el tema.

Hay 4 tipos de exportaciones. Aquí hay ejemplos de uso de cada uno, junto con algunas importaciones que los usan:

Exportar sintaxis

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

Importar sintaxis

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

Fuente.


9
Gran lista, pero ¿puede ampliar lo que hace cada tipo y cuáles son las diferencias?
Dan Dascalescu

2
Esa es una excelente idea. Quiero ser exhaustivo con cada explicación, pero no he tocado ES6 en un tiempo, así que estoy un poco oxidado. Tendré que esperar hasta que esté de vuelta en la tierra de ES6 para poder estar seguro de lo que estoy hablando.
kdbanman

eres el mejor
zok

40

Ambos son válidos.

El método 1 proporciona exportaciones con nombre . La clave aquí es que puede exportar más de una cosa. Esto debería usarse en lugar de exportar un objeto con múltiples propiedades. Cuando importe un módulo con exportaciones con nombre, utilice import {a, b} from c.

El método 2 proporciona la exportación predeterminada . Solo puede haber una exportación predeterminada. Esto se usa principalmente cuando está exportando una sola cosa, como una class, o una sola functionque espera que se use sin ningún soporte adicional. Cuando importe un módulo con una exportación predeterminada, utilice import d from c.

¡Tenga en cuenta que puede usar ambos! de modo que si tiene una función principal importante con un puñado de ayudantes que se utilizan ocasionalmente, puede utilizar exportlos ayudantes y export defaultla principal. Cuando importe un módulo y necesite ambos tipos de exportaciones, utilice import d, {a, b} from c.

Otra opción es que usted puede conseguir las exportaciones, mediante su inclusión en el final de su módulo llamado, así: export {a,b,c}. También puede cambiarles el nombre export {a as $a, b as c}.

Obtuve todo esto de este artículo , que es la mejor fuente de información actualizada del módulo es6 que he podido encontrar.


3
  1. ¿Son ambos válidos?

No, export function () { return answer; };no es válido, o usa default o agrega un nombre a esa declaración de función.

  1. Si es así, ¿por qué existen ambos?

Ellos no :)

  1. ¿Existen otras opciones válidas para la exportación de módulos utilizando la sintaxis ES6?

Puede ver muchas opciones válidas aquí: https://github.com/eslint/espree/pull/43

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.