¿Qué es "exportación predeterminada" en javascript?

570

Archivo: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

Nunca he visto export defaultantes ¿Hay algo equivalente para export defaultque pueda ser más fácil de entender?

Damphat
fuente
29
Esta es una explicación muy clara en este 24ways.org/2014/javascript-modules-the-es6-way
nish1013
2
exportdetalles de palabras clave aquí . Actualmente se no compatible de forma nativa por cualquiera de los navegadores web.
RBT
3
Ahora es compatible con todos los navegadores, excepto IE.
Brian Di Palma
1
Muy buena respuesta stackoverflow.com/a/36426988/5473170
Suraj Jain
He aquí, mira ^ arriba para obtener respuestas; mira \ / abajo para la confusión. Te he mostrado da dai
Andrew

Respuestas:

456

Es parte del sistema de módulos ES6, que se describe aquí . Hay un ejemplo útil en esa documentación, también:

Si un módulo define una exportación predeterminada:

export default function() { console.log("hello!") }

entonces puede importar esa exportación predeterminada omitiendo las llaves:

import foo from "foo";
foo(); // hello!

Actualización: a partir de junio de 2015, el sistema de módulos se define en §15.2 y la exportsintaxis en particular se define en §15.2.3 de la especificación ECMAScript 2015.

pswg
fuente
1
@GeenHenk Supongo que es de esperar ya que ES6 todavía es un borrador. He proporcionado un enlace actualizado y un descargo de responsabilidad.
pswg
77
No veo cómo la función predeterminada de exportación () {} es diferente de export = function () {} ....
Alexander Mills
1
¿Qué pasa con los casos en que es así export const Foo = () => {}y luego al final del archivo export default Fooveo esto en un montón de ejemplos de reacción? ¿Qué pasa con las dos exportaciones?
FlavorScape
Sería bueno ver un ejemplo con exportaciones predeterminadas y con nombre. En otras palabras, esa exportación que satisfaríaimport foo, { bar, baz } from './foo';
gumkins
1
Gracias por responder, pero el uso de foo en el segundo ejemplo es un poco ambiguo; qué es foo y cómo nombraste el primer archivo; ¿cómo es que se puede hacer import foo from "foo"? ¿Hubo un objeto que contenía foo, ya que en el primer ejemplo su función exportada no tiene nombre? @pswg
nosahama
159

export default se utiliza para exportar una sola clase, función o primitiva desde un archivo de script.

La exportación también se puede escribir como

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

Esto se usa para importar esta función en otro archivo de script

Di en app.js , puedes

import SafeString from './handlebars/safe-string';

Un poco sobre exportación

Como su nombre lo indica, se utiliza para exportar funciones, objetos, clases o expresiones desde archivos de script o módulos

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Esto se puede importar y usar como

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

O

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Cuando se usa el valor predeterminado de exportación, esto es mucho más simple. Los archivos de script solo exportan una cosa. cube.js

export default function cube(x) {
  return x * x * x;
};

y se usa como App.js

import Cube from 'cube';
console.log(Cube(3)); // 27
sudo bangbang
fuente
78

export default function(){}se puede usar cuando la función no tiene nombre. Solo puede haber una exportación predeterminada en un archivo. La alternativa es una exportación con nombre.

Esta página describe export defaulten detalle, así como otros detalles sobre los módulos que encontré muy útiles.

Greg Gum
fuente
14
Puede usar exportaciones predeterminadas y con nombre juntas si lo desea.
Bergi
@Greg gum la página está desactualizada. Se está redirigiendo a exploringjs.com/es6/ch_modules.html
rajakvk
@rajakvk, es cierto, pero la página original tiene mucha más información de fondo para aquellos que comienzan.
Greg Gum
77
Esta respuesta es mejor que la aceptada porque explica lo que defaultsignifica y para mí la pregunta era sobre esta palabra.
Dariusz Sikorski
1
@DariuszSikorski la respuesta aceptada explica qué defaultsignifica, ya que la exportación predeterminada se puede importar sin usar llaves. Esta respuesta es bastante incorrecta, ya que dice que solo se puede usar defaultcuando solo hay una exportación en un archivo, lo cual no es cierto en absoluto. Puede tener varias exportaciones en el mismo archivo, pero, por supuesto, solo 1 de ellas se puede configurar como la defaultúnica.
realUser404
43

Estoy escribiendo esta publicación porque (supongo que estoy cansado) no entendí bien ni MDN, ni la descripción de otras personas y la mejor manera de entender algo es enseñárselo a otras personas. Es solo que no veo una respuesta simple de la pregunta.

¿Qué es "exportación predeterminada" en javascript?

En la exportación predeterminada, el nombre de importación es completamente independiente y podemos usar cualquier nombre que nos guste.

Ilustraré esta línea con un ejemplo simple.

Digamos que tenemos 3 módulos y un index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

El resultado es:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

Entonces la explicación más larga es :

'export default' se usa si desea exportar una sola cosa para un módulo.

Entonces, lo importante es "importar blabla desde './modul3.js'", podríamos decir:

"importar pamelanderson desde './modul3.js" y luego pamelanderson (); Esto funcionará bien cuando usemos 'export default' y básicamente esto es todo: nos permite nombrarlo como queramos cuando está predeterminado .


Ps Si quiere probar el ejemplo: cree primero los archivos y luego permita CORS en el navegador -> si está usando el tipo de Firefox en la url del navegador: acerca de: config -> Busque "privacy.file_unique_origin" -> cambiar en "falso" -> abrir index.html -> presione F12 para abrir la consola y ver el resultado -> Disfrute y no olvide volver a la configuración predeterminada.

Ps2 Perdón por el tonto nombre de variables

Más información @ link2medium , link2mdn1 , link2mdn2

Combinar
fuente
44
Esto debería ser aceptado como la mejor respuesta, pero hice lo que pude con mi voto a favor.
Jarmos
1
¡Muchas gracias!
Combine el
1
Esta debería ser la respuesta aceptada con las manos levantadas
nosahama
16

Como se explica en esta página MDN

Hay dos tipos diferentes de exportación, con nombre y por defecto. Puede tener múltiples exportaciones con nombre por módulo, pero solo una exportación predeterminada [...] Las exportaciones con nombre son útiles para exportar varios valores. Durante la importación, es obligatorio usar el mismo nombre del objeto correspondiente, pero una exportación predeterminada se puede importar con cualquier nombre

Por ejemplo:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123
manfall19
fuente
6

En mi opinión lo importante acerca de la exportación predeterminada es que se PUEDE importar con CUALQUIER nombre.

si hay un archivo foo.js que exporta por defecto:

export default function foo(){}

se puede importar en bar.js usando:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

Pauls Bebris
fuente
1

Hay dos tipos diferentes de exportación, con nombre y por defecto . Puede tener múltiples exportaciones con nombre por módulo, pero solo una exportación predeterminada. Cada tipo corresponde a uno de los anteriores. Fuente: MDN

Exportación denominada

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Exportación predeterminada

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// puedes usar un nombre diferente para la importación predeterminada

import Foo from 'path-to-file' // this will assign any default export to Foo.
Víctor
fuente
-3

export default se usa para exportar una sola clase, función o primitivo.

La función predeterminada de exportación () {} se puede usar cuando la función no tiene nombre. Solo puede haber una exportación predeterminada en un archivo.

Lee mas

Viju
fuente