Export și import implicit

Când exportăm, putem specifica un component care va fi exportat implicit folosind operatorul default. De exemplu, definim următorul modul message.js:

export default function sayHello() {
 console.log("Hello from sayHello function");
}

Pentru a face un export implicit, după operatorul export se specifică operatorul default.

Acum importăm această funcție în modulul main.js:

import sayHello from "./message.js";

sayHello();

Pentru importul unui component implicit, este suficient să specifici după operatorul import numele acestui component.

Avantajul exportului implicit este că la import nu este necesar să știi cum se numește componentul exportat în modul.

Export/import combinat de componente separate și componente implicite

Un modul poate exporta în același timp componente separate și un component implicit:

export let welcome = "Welcome";
export const hello = "Hello";

export default function sayHello() {
 console.log("Hello FDC.COM");
}

export class Messenger {
   send(text){
       console.log("Sending message:", text);
   }
}

Aici sunt exportate toate componentele, însă doar funcția sayHello este exportată implicit. Această definiție a modulului este de asemenea echivalentă cu următoarea definiție, unde componentele sunt exportate printr-o listă:

let welcome = "Welcome";
const hello = "Hello";

function sayHello() {
 console.log("Hello FDC.COM");
}

class Messenger {
   send(text){
       console.log("Sending message:", text);
   }
}

export {welcome, hello, sayHello as default, Messenger}

La importul unui astfel de modul, toate componentele, cu excepția componentului implicit, trebuie importate separat:

import sayHello, {welcome, Messenger} from "./message.js";

sayHello();

const telegram = new Messenger();
telegram.send(welcome);

Export și import implicit al întregului modul

Este important de reținut că atunci când exportăm implicit, putem utiliza operatorul default doar o singură dată. Nu putem exporta implicit mai multe componente separat. Cu toate acestea, putem exporta implicit un set de componente ca un tot unitar. De exemplu, definim următorul modul message.js:

let welcome = "Welcome";
const hello = "Hello";

function sayHello() {
 console.log("Hello FDC.COM");
}

class Messenger {
   send(text){
       console.log("Sending message:", text);
   }
}

export default {welcome, hello, sayHello, Messenger}

Acum importăm funcționalitatea modulului message.js în modulul main.js:

import MessageModule from "./message.js";

MessageModule.sayHello();

const telegram = new MessageModule.Messenger();
telegram.send(MessageModule.welcome);

În acest caz, întreaga listă exportată de componente va fi asociată cu numele MessageModule, care practic va reprezenta modulul. Și ulterior, prin acest identificator, se poate accesa un component specific, folosind numele componentului: MessageModule.sayHello();