JS modules – Importieren und Exportieren

von

JavaScript-Module erlauben es, Code in kleine, wiederverwendbare Dateien zu gliedern. Es gibt verschiedene Standards:

  • ES Modules (ESM) – offizieller Standard seit ES6, unterstützt import/export.
  • CommonJS (CJS) – Standard in Node.js, verwendet require() und module.exports.
  • AMD (Asynchronous Module Definition) – oft in Browsern vor ESM verwendet, unterstützt asynchrones Laden (define() und require()).

Module kapseln Code (Variablen, Funktionen, Objekte oder Klassen), reduzieren globale Variablen und erhöhen die Wiederverwendbarkeit.

ESM (ES Modules):

ESM ist der moderne Standard im Browser und in NodeJS, unterstützt statische Analyse und Tree Shaking.

    ImportExport
    import { name } from './modul.js';
    import DefaultFunc from './modul.js';    		export const name = "Lisa";
    export default function() { … }

    Hinweise:

    • im Browser müssen referenzierte Module das Attribut type mit dem Wert module bekommen (<script type="module" src="module.js"></script>)

    export default():

    • ein Modul kann genau einen default-Export haben
    • alles was als default exportiert wird, kann beim Import direkt in eine Variable geladen werden
    • ESM-only
    /* EXPORT in modul.js */

function greet() { console.log("Hi"); }
function farewell() { console.log("Bye"); }

export default {
  greet,
  farewell
};
    /* IMPORT in main.js */

import MyModule from './modul.js';

MyModule.greet();     // Hi
MyModule.farewell();  // Bye

    oder:

    /* EXPORT in modul.js */

export const fart = () => console.log("PfrrrrrrrrRRRrrRRtttzzzz");
export default function() { console.log("Default"); }



    /* IMPORT in main.js */

import { fart } from './modul.js';
import defFunc from './modul.js';

fart();    // Hi
defFunc();  // Default

    named exports:

    • exportiert Variablen, Funktionen, Objekte oder Klassen anhand ihres Namens aus dem Modul
    • beim Import müssen exakt diese Namen genutzte werden
    • Vorteile: mehrere Export pro Modul möglich + Tree Shaking (nur importierte Dinge landen im Bundle)
    /* EXPORT in modul.js */

export const name = "Lisa";
export const age = 25;

export function greet() {
  console.log(`Hi, ich heiße ${name}`);
}

export class User {
  constructor(name) {
    this.name = name;
  }
}
    /* IMPORT in main.js */

import { name, User } from './modul.js';
import { greet as sayHello } from './modul.js';   // Alias-Import

console.log(name); // Lisa
sayHello(); // Hi, ich heiße Lisa

const user = new User("Tom");
console.log(user.name); // Tom

    Kombinieren von default und named export:

    • kann hilfreich sein, wenn z.B. eine primäre Funktionalität als default mit optionalen Erweiterungen bereitgestellt werden soll
    /* EXPORT in modul.js */

export default function add(a, b) {
  return a + b;
}
 
export function subtract(a, b) {
  return a - b;
}
 
export const PI = 3.14159
    /* IMPORT in main.js */

import addFunction, { subtract, PI } from './math.js';

console.log(addFunction(2, 3)); // Outputs: 5
console.log(subtract(5, 2)); // Outputs: 3
console.log(PI); // Outputs: 3.14159

    Re-Export:

    • ermöglicht das Importieren aus Modulen, die nicht der Deklarationsort sind, sondern selber nur einen Import verwenden
    /* EXPORT in modules/math.js */
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
// modules/geometry.js
export const PI = 3.14159;
export function calculateCircumference(radius) {
  return 2 * PI * radius;
}

/* then RE-EXPORT in modules/index.js */
export { add, subtract } from './math.js';
export { PI, calculateCircumference } from './geometry.js';
    /* FINAL IMPORT in app.js */

import { add, subtract, PI, calculateCircumference } from './modules/index.js';

console.log(add(2, 3)); // Outputs: 5
console.log(subtract(5, 2)); // Outputs: 3
console.log(PI); // Outputs: 3.14159
console.log(calculateCircumference(10)); // Outputs: 62.8318

    Common JS (CJS):

    CJS ist synchron, Standard in Node.js, aber im Browser nur über Bundler nutzbar.

    Importconst mod = require('./modul');
    Exportmodule.exports = {...}
    exports.name = value;

    Beispiel:

    // modul.js
exports.greet = () => console.log("Hi");
module.exports.default = function() { console.log("Default"); };

// main.js
const mod = require('./modul');

mod.greet();    // Hi
mod.default();  // Default

    Asynchronous Module Definition (AMD):

    AMD lädt Module asynchron im Browser, wird heute meist durch ESM ersetzt.

    Importrequire(['modul'], function(mod) { … });
    Exportdefine(function() {return {greet: function() {…} }; });

    Beispiel:

    // modul.js
define(function() {
  return {
    greet: function() { console.log("Hi"); }
  };
});

// main.js
require(['modul'], function(mod) {
  mod.greet();  // Hi
});