Molti di noi pensano che quando abbiamo solo una cosa da esportare da un file dovremmo usare export defaulte se c'è più di una cosa allora usa named exportda solo o usalo con export default.

Ed è perfettamente utilizzabile export defaultper piccoli progetti, ma se stai lavorando a un progetto di grandi dimensioni o lavori a un progetto con un team, l'utilizzo export defaultpotrebbe non essere una buona scelta.

Cerchiamo di capire, perché?

❓ Perché non dovremmo usare export default

Il primo motivo per non utilizzare export defaultè che durante l'utilizzo importpossiamo cambiare il nome dell'oggetto esportato. O per dire, abbiamo la possibilità di scegliere un nome per le esportazioni predefinite

Ad esempio, se abbiamo un'esportazione predefinita come questa

// helloWorld.js

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

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

Quindi, se stiamo lavorando con un team, cambiare nome può causare molti problemi con il debug del codice o con il refactoring.

Ma per ovviare a questo problema e per mantenere il codice coerente, esiste una regola secondo cui il nome dell'oggetto importato deve corrispondere al nome del file di importazione. Come questo

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

l'esportazione predefinita rende la riesportazione un po' più complicata

Se non sai cos'è una riesportazione? poi, quando noi importuna cosa ma invece di usarla exportla usiamo direttamente, così

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

• Per riesportare un'esportazione predefinita, dobbiamo utilizzare export {default as HelloWorld}. Non possiamo usare export HelloWorld from “helloWorld.js”, questo si tradurrà in un file Syntax Error.
• Se il nostro file contiene molte esportazioni denominate e un'esportazione predefinita, allora possiamo fare qualcosa di simile

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

Per questo è tutto

Sperando che questo blog ti possa aiutare. E inizierai anche a guardare dove dovresti usare export defaulte dove non dovresti.

Commenta, Com'è stato questo blog? o qualsiasi feedback. Mi piacerebbe leggere i tuoi commenti.

Connettiti con me su Twitter

Bisogno del tuo aiuto!

Di recente, ho realizzato un progetto che è un clone di Typeform. E l'ho lanciato su Peerlist Project Spotlight.
Sarebbe davvero fantastico se potessi votare il mio progetto.

Progetto: Formare Typeform

Grazie mille!