Wie man eine JS-Datei in eine andere einbindet: 5 funktionierende Methoden

«Setze deinen Code aus Einzelteilen zusammen»: Warum man eine JS-Datei nicht einfach in eine andere einfügen kann

Jeder, der länger als ein paar Wochen JavaScript geschrieben hat, stößt früher oder später auf eine Wand: «Wie kann ich Funktionen aus einer anderen Datei verwenden? Soll ich sie etwa hin und her kopieren?!» Der gute alte Stack Overflow weiß das nur zu gut – die Frage "How do I include a JavaScript file in another JavaScript file?" erhält jeden Monat tausende Aufrufe. Und das ist logisch: In realen Projekten wächst der Code schnell, und alles in einer Datei zu halten, führt ins Chaos.

In diesem Artikel betrachten wir 5 bewährte Methoden, um eine JS-Datei in eine andere einzubinden. Von alten Methoden bis zu modernen Standards. Los geht's!

Methode 1: Klassisches <script> in HTML

Der einfachste und urzeitlichste Weg – fügen Sie einfach mehrere <script>-Tags in Ihre HTML-Datei ein. Aber es gibt einen Haken: Die Dateien werden nacheinander geladen. Wenn Ihr main.js von utils.js abhängt, muss utils.js weiter oben stehen.

<!DOCTYPE html><html><head>    <script src="utils.js"></script>    <script src="main.js"></script></head><body>    ...</body></html>

Problem: Dies ist keine Einbindung einer JS-Datei in eine andere JS-Datei, sondern nur eine Ladereihenfolge. Wenn Sie 20 Skripte haben, riskieren Sie, sich in den Abhängigkeiten zu verlieren. Außerdem werden alle Variablen und Funktionen global – hallo, Namenskonflikte!

Methode 2: ES6-Module (moderner Standard)

Seit ES6 (ECMAScript 2015) gibt es in JavaScript ein integriertes Modulsystem. Dies ist der korrekteste Weg, eine JS-Datei in eine andere einzubinden in modernen Projekten.

Export aus einer Datei (math.js)

// math.jsexport function add(a, b) {    return a + b;}

export const PI = 3.14159;

export default function multiply(a, b) {    return a * b;}

Import in eine andere Datei (app.js)

// app.jsimport multiply, { add, PI } from './math.js';

console.log(add(2, 3));      // 5console.log(PI);             // 3.14159console.log(multiply(4, 5)); // 20

Wichtig: Damit dies im Browser funktioniert, muss dem HTML das Attribut type="module" hinzugefügt werden:

<script type="module" src="app.js"></script>

Diese Methode löst alle Probleme: Code-Isolation, klare Abhängigkeiten, keine globalen Variablen. Ideal für moderne Webanwendungen.

Methode 3: Node.js require (CommonJS)

Wenn Sie für Node.js schreiben, ist der Standard CommonJS mit der Funktion require(). Diese Methode, eine JS-Datei in eine andere JS-Datei einzubinden, wird in der Serverentwicklung immer noch verwendet (obwohl ES6-Module inzwischen auch dort angekommen sind).

Export (utils.js)

// utils.jsfunction greet(name) {    return `Hallo, ${name}!`;}

const secret = 'myPassword123';

module.exports = {    greet,    secret};

Import (server.js)

// server.jsconst utils = require('./utils.js');

console.log(utils.greet('Alex')); // Hallo, Alex!console.log(utils.secret);       // myPassword123

Einfach, zuverlässig, funktioniert überall, wo Node.js läuft. Für Browser – nein, nur über Bundler (Webpack, Vite).

Methode 4: Dynamisches Laden von Skripten (script-Tag erstellen)

Manchmal muss man eine JS-Datei aus einer anderen JS-Datei einbinden, direkt während der Laufzeit. Zum Beispiel, wenn Sie Analysen oder ein Plugin nur bei Bedarf nachladen. Dazu kann man dynamisch ein <script>-Tag erstellen.

// loadScript.jsfunction loadScript(src, callback) {    const script = document.createElement('script');    script.src = src;    script.onload =