ES6-Module reagieren

Module

Mit JavaScript-Modulen können Sie Ihren Code in separate Dateien aufteilen.

Dies erleichtert die Pflege der Codebasis.

ES-Module stützen sich auf die importund export-Anweisungen.

Export

Sie können eine Funktion oder Variable aus einer beliebigen Datei exportieren.

Lassen Sie uns eine Datei mit dem Namen erstellen person.jsund sie mit den Dingen füllen, die wir exportieren möchten.

Es gibt zwei Arten von Exporten: Benannt und Standard.

Benannte Exporte

Sie können benannte Exporte auf zwei Arten erstellen. Inline einzeln oder alle auf einmal unten.

export const name = "Jesse"
export const age = "40"

const name = "Jesse"
const age = "40"

export { name, age }

Standardexporte

Lassen Sie uns eine weitere Datei mit dem Namen erstellen message.jsund sie verwenden, um den Standardexport zu demonstrieren.

Sie können nur einen Standardexport in einer Datei haben.

const message = () => {
  const name = "Jesse";
  const age = "40";
  return name + ' is ' + age + 'years old.';
};

export default message;

Importieren

Sie können Module auf zwei Arten in eine Datei importieren, je nachdem, ob es sich um benannte Exporte oder Standardexporte handelt.

Benannte Exporte müssen mit geschweiften Klammern destrukturiert werden. Standardexporte nicht.

import { name, age } from "./person.js";

import message from "./message.js";