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

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?

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.

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

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.

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

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

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

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.

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