Beaucoup d'entre nous pensent que lorsque nous n'avons qu'une seule chose à exporter à partir d'un fichier, nous devrions utiliser export defaultet s'il y a plus d'une chose, utilisez named exportseul ou utilisez-le avec export default.

Et c'est tout à fait bien de l'utiliser export defaultpour de petits projets, mais si vous travaillez sur un grand projet ou si vous travaillez sur un projet avec une équipe, l'utilisation export defaultpeut ne pas être un bon choix.

Comprenons, pourquoi?

❓ Pourquoi nous ne devrions pas utiliser l'exportation par défaut

La première raison de ne pas utiliser export defaultest qu'en utilisant, importnous pouvons changer le nom de la chose exportée. Ou pour dire, nous avons la possibilité de choisir un nom pour les exportations par défaut

Par exemple, si nous avons une exportation par défaut comme celle-ci

// helloWorld.js

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

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

Donc, si nous travaillons avec une équipe, changer de nom peut causer beaucoup de problèmes avec le débogage du code ou avec le refactoring.

Mais pour surmonter cela et pour garder le code cohérent, il existe une règle selon laquelle le nom de la chose importée doit correspondre au nom du fichier d'importation. Comme ça

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

l'exportation par défaut rend la réexportation un peu plus délicate

Si vous ne savez pas Qu'est-ce qu'une réexportation ? puis, quand on importa une chose mais au lieu de l'utiliser on l'utilise directement export, comme ça

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

• Pour réexporter une exportation par défaut, nous devons utiliser export {default as HelloWorld}. Nous ne pouvons pas utiliser export HelloWorld from “helloWorld.js”, cela se traduira par un Syntax Error.
• Si notre fichier contient de nombreuses exportations nommées et une exportation par défaut, nous pouvons faire quelque chose comme ça

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

C'est tout pour ça

En espérant que ce blog vous aidera. Et vous commencerez également à regarder les endroits où vous devriez utiliser export defaultet où vous ne devriez pas.

Commentaire, Comment était ce blog ? ou tout commentaire. J'aimerais lire vos commentaires.

Connectez-vous avec moi sur Twitter

Besoin de votre aide!

Récemment, j'ai construit un projet qui est un clone Typeform. Et, l'ont lancé sur Peerlist Project Spotlight.
Ce serait vraiment génial si vous pouviez voter pour mon projet.

Projet : Formage d'un formulaire

Merci beaucoup!