Export og Import

Der findes flere variationer af direktivet import og eksport.

I den forrige artikel så vi en simpel brug. Lad os nu udforske lidt flere eksempler.

Export før deklerationer

Vi kan navngive deklarationer som eksporteret ved at skrive export foran dem, hvad end det er en variabel, funktion eller klasse.

Alle disse eksporteringer er gyldige:

          // eksporter et array
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// eksporter en constant
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// eksporter en class
export class User {
  constructor(name) {
    this.name = name;
  }
}
        

Bemærk, at export før en class eller en function ikke gør den til en function expression. Det er stadig en function deklarering, selvom den er eksporteret.

De fleste JavaScript style guides anbefaler ikke semikolon efter deklarationer af function og class.

Det er derfor, at der ikke er behov for en semicolon i slutningen af export class og export function:

          export function sayHi(user) {
  alert(`Hej, ${user}!`);
}  // Ingen ; i slutningen
        

Export andre steder end deklarationer

Vi kan også skrive export separat.

Her deklarerer vi først og eksporterer bagefter:

          // 📁 say.js
function sayHi(user) {
  alert(`Hej, ${user}!`);
}

function sayBye(user) {
  alert(`Farvel, ${user}!`);
}

export {sayHi, sayBye}; // en liste af eksporterede variable
        

… eller, teknisk set kan vi også placere export før funktionerne.

Import *

Normal vil vi opstille en liste over, hvad vi vil importere, i krøllede parenteser import {...}, som dette:

          // 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hej, John!
sayBye('John'); // Farvel, John!
        

Men, hvis der er meget der skal importeres, kan vi importere alt som et objekt ved hjælp af import * as <obj>, for eksempel:

          // 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');
        

Umiddelbart virker “importer alt” som en smart ting – kort at skrive. Hvorfor skulle vi nogensinde eksplicit liste hvad vi har brug for at importere?

Der er faktisk et par grunde.

Eksplicit oplistning af hvad du vil importere giver kortere navne: sayHi() i stedet for say.sayHi().
Eksplicit oplistning af import giver et bedre overblik over kodestrukturen: hvad er brugt og hvor. Det gør det lettere at vedligeholde og refaktorere kode.

Moderne build tools, såsomVite, webpack og andre, samler moduler optimerer for at siden loader hurtigere. Her vil de også fjerne imports der ikke anvendes.

Hvis du for eksempel skriver import * as library fra et stort kodebibliotek og kun bruger et par af metoderne, vil de ubrugte metoder ikke blive inkluderet i det optimerede bundle.

Import “as”

Vi kan også bruge as til at importere under forskellige navne.

For eksempel, lad os importere sayHi til den lokale variabel hi for at gøre det kortere, og importere sayBye som bye:

          // 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hej, John!
bye('John'); // Farvel, John!
        

Export “as”

En lignende syntakst eksisterer for export.

Lad os eksportere funktionerne som hi og bye:

          // 📁 say.js
...
export {sayHi as hi, sayBye as bye};
        