JavaScript: Import Export (modules)

Snippets » JavaScript » ES6+ » JavaScript: Import Export (modules)

I next gen JavaScript er det muligt at dele sin kode op i flere filer (modules) og bruge import/export til at genbruge vores moduler. Dette har længe været muligt i mange andre programmeringssprog og kan gøre kode mere overskuelig, genanvendelig og give en bedre kodestruktur.

Default export

I eksemplet herunder ses filen app.js og car.js. For at man kan importere noget fra et andet dokument skal det eksporteres fra det dokument det er i. Læg mærke til, at variablen car i eksemplet bliver eksporteret som default. Dette gør, at dette automatisk bliver importeret, hvis der ikke er specificeret , hvad man vil importere.

// app.js
import car from './car.js'

// car.js
const car = {
  name: "Volvo"
}

export default car

Når det er default man importerer kan man selv vælge, hvad man vil kalde det indhold man importerer som her:

// app.js
import myObject from './car.js'

Named export

Named export kræver, at man eksporterer med et navn og derfor også importere med et navn. Her skal navne på de importerede variabler skrives i krøllede paranteser

// settings.js
export let colors = ["red", "green", "blue", "yellow"]
export const MONTHS = ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "nov", "Dec"]

// app.js
import { colors } from './settings.js'
import { MONTHS } from './settings.js'

Man kan også importere flere moduler i samme linje som her

//  app.js
import { colors, MONTHS } from './settings.js'

Import as

Har man en bestemt navngivningskonvention eller er der risiko for at importere flere moduler med samme navn kan man bruge keyname as

// app.js
import { colors as Colors } from './settings.js'

Importer alt

Man kan også importere alle moduler fra et dokument med *

// app.js
import { * as allModules } from './settings.js'