Muchos de nosotros pensamos que cuando solo tenemos una cosa para exportar desde un archivo, debemos usar export defaulty si hay más de una cosa, entonces use named exportsolo o úselo con export default.

Y está totalmente bien usarlo export defaultpara proyectos pequeños, pero si está trabajando en un proyecto grande o trabajando en un proyecto con un equipo, entonces usar export defaultpodría no ser una buena opción.

Entendamos, ¿Por qué?

❓ Por qué no deberíamos usar export default

La primera razón para no usar export defaultes que mientras usamos importpodemos cambiar el nombre de lo exportado. O decir, tenemos la opción de elegir un nombre para las exportaciones predeterminadas.

Me gusta, si tenemos una exportación predeterminada como esta

// helloWorld.js

export default function helloWorld() {
    console.log("Hello! World");
}

import HelloWorld from "helloWorld.js";
import HWorld from "helloWorld.js";

Entonces, si estamos trabajando con un equipo, cambiar los nombres puede causar muchos problemas con la depuración del código o con la refactorización.

Pero para superar esto, y para mantener la consistencia del código, hay una regla que establece que el nombre de la cosa importada debe coincidir con el nombre del archivo de importación. Como esto

import GetItem from "getItem.js";
import FindUser from "findUser.js";

la exportación predeterminada hace que la reexportación sea un poco más complicada

Si no sabe ¿Qué es una reexportación? entonces, cuando hacemos importuna cosa pero en lugar de usarla directamente export, así

// first
import HelloWorld from "helloWorld.js";
export { HelloWorld };

// second
import {getUser, findUser} from "user.js"; // named export
export {getUser, findUser};

export {default as HelloWorld} from "helloWorld.js";
export {getUser, findUser} from "user.js";

• Para volver a exportar una exportación predeterminada, tenemos que usar export {default as HelloWorld}. No podemos usar export HelloWorld from “helloWorld.js”, esto dará como resultado un archivo Syntax Error.
• Si nuestro archivo contiene muchas exportaciones con nombre y una exportación predeterminada, entonces podemos hacer algo como esto

export * from "items.js"; // to import and export all named exports    
export {default} from "item.js"; // to import and export default export

Eso es todo por esto

Esperando que este blog te ayude. Y también comenzará a buscar lugares donde debe consumir export defaulty donde no.

Comenta, ¿Qué tal este blog? o cualquier comentario. Me encantaría leer tus comentarios.

Conéctate conmigo en Twitter

¡Necesitamos su ayuda!

Recientemente, construí un proyecto que es un clon de Typeform. Y lo he lanzado en Peerlist Project Spotlight.
Sería genial si pudieras votar mi proyecto.

Proyecto: Formando Typeform

¡Gracias una tonelada!