JavaScript ES6 Imports

Die Imports von JavaScript ES6 sind nicht immer leicht zu verstehen, daher hier ein Erklärungsversuch:

Default Import

Der Default-Import sieht wie folgt aus:

import CodeA from './CodeA'

Das funktioniert jedoch nur, wenn CodeA.js einen Default Export enthält:

export default 123

In diesem Fall spielt es keine Rolle, welchen Namen man beim Import zuweist:

import Example from './CodeA'
import myExample from './CodeA'
import SomethingElse from './CodeA'

Named Import

Ein wenig anders sieht es beim Named Import aus. Ein Codebeispiel:

import { CodeA } from './CodeA'

Dieser Code funktioniert nur, wenn ein passender Export definiert ist:

export const CodeA = 123

In diesem Fall spielt der Name beim Import eine wichtige Rolle:

import { CodeA } from './CodeA' // funktioniert
import { Example } from './CodeA' // funktioniert nicht!
import { myExample } from './CodeA' // funktioniert nicht!
import { SomethingElse } from './CodeA' // funktioniert nicht!

Damit beispielsweise { Example } funktioniert, muss ein passender Export definiert sein:

export const Example = 234

Wann nutzt man was?

Ein Modul kann nur einen Default Export, jedoch beliebig viele Named Exports besitzen. Zusammengefasst könnte man nutzen:

import CodeA, { Example, SomethingElse } from './CodeA'

Der zugehörige Export müsste dann wie folgt aussehen:

export default 123
export const Example = 234
export const SomethingElse = 345

Beim Import kann außerdem ein anderer Name spezifiziert werden:

import CodeA, { Example as myExample, SomethingElse as mySomethingElse } from './CodeA'

Den Default Export nutzt man standardmäßig für die Rückgabe eines Moduls. Den Named Export nutzt man für weitergehende Exports, die genutzt werden können aber nicht unbedingt genutzt werden müssen.

Schreibe einen Kommentar