JavaScript require erklärt: CommonJS-Module, Unterschiede beim Import und Browser-Bundler

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung: Was ist Modulverwaltung in JavaScript?

JavaScript wird häufig als einfache und flexible Skriptsprache eingesetzt. Doch wenn Anwendungen größer werden, wird die Verwaltung des Codes immer schwieriger. Genau hier kommt die „Modulverwaltung“ ins Spiel.

Durch die Nutzung von Modulverwaltung kannst du den Code nach Funktionalität aufteilen und wiederverwendbar machen. Dieser Ansatz verbessert die Wartbarkeit und Lesbarkeit und hilft Teams, in der kollaborativen Entwicklung reibungsloser zu arbeiten.

In diesem Abschnitt behandeln wir kurz das Grundkonzept der Modulverwaltung in JavaScript und stellen eine wichtige Funktion vor: require.

Was ist ein Modul?

Ein Modul bezeichnet eine unabhängige Datei oder einen Code‑Block, der bestimmte Funktionalitäten oder Daten bündelt. In JavaScript bietet die Verwendung von Modulen folgende Vorteile.

1. Wiederverwendbarkeit von Code – Du musst denselben Code nicht mehrfach schreiben, was eine effiziente Entwicklung ermöglicht.
2. Verbesserte Wartbarkeit – Der Code wird leichter verständlich, sodass Bug‑Fixes und Feature‑Erweiterungen einfacher sind.
3. Klare Abhängigkeiten – Du kannst explizit angeben, woher benötigte Features oder Daten stammen.

JavaScript‑Modulsysteme

JavaScript verfügt hauptsächlich über die folgenden beiden Modulsysteme.

1. CommonJS

• Vorwiegend in der Node.js‑Umgebung verwendet.
• Nutzt die require‑Funktion zum Importieren von Modulen.
• Weit verbreitet in der serverseitigen Entwicklung.

2. ES‑Module (ECMAScript Modules)

• Seit ES6 standardisiert.
• Verwendet das import‑Statement, um mit Modulen zu arbeiten.
• Sowohl in Browsern als auch auf dem Server verfügbar.

Was ist die require‑Funktion?

Wir werden sie später ausführlich erklären, aber require ist eine Funktion, die zum Importieren von Modulen im CommonJS‑System verwendet wird. Sie wird häufig in der Node.js‑Umgebung eingesetzt. Hier ein einfaches Beispiel.

const fs = require('fs'); // Import the file system module
const data = fs.readFileSync('example.txt', 'utf8');
console.log(data);

In diesem Code wird das eingebaute fs‑Modul importiert, um eine Datei zu lesen.

Warum Modulverwaltung wichtig ist

Modulverwaltung mag bei kleinen Projekten überflüssig erscheinen. Doch mit wachsendem Projektumfang wird der Code komplexer und die Abhängigkeiten nehmen zu. Wenn du sie nicht richtig verwaltest, können folgende Probleme auftreten.

1. Mehr duplizierter Code.
2. Änderungen werden schwieriger.
3. Zusammenarbeit im Team wird erschwert.

Um diese Probleme zu lösen, musst du die Modulmechanismen wie require und import verstehen und korrekt einsetzen.

Zusammenfassung

In diesem Abschnitt haben wir das Grundkonzept der Modulverwaltung in JavaScript und deren Bedeutung erklärt. Außerdem haben wir kurz die Unterschiede zwischen CommonJS und ES‑Modules vorgestellt und die Rolle der require‑Funktion angerissen, die in späteren Abschnitten vertieft wird.

Im nächsten Abschnitt erklären wir „Was ist require?“ genauer und zeigen, wie man es mit Beispielcode verwendet.

2. Was ist require? Kernkonzepte und seine Rolle

In JavaScript ist es wichtig, Code in Module zu organisieren und Funktionen bei Bedarf aufzurufen. In diesem Abschnitt erläutern wir die require‑Funktion im CommonJS‑Modulsystem im Detail.

Was ist die require‑Funktion?

Die require‑Funktion ist ein Mechanismus zum Importieren von Modulen im CommonJS‑Modulsystem. Sie wird insbesondere in der Node.js‑Umgebung verwendet und soll das Arbeiten mit externen Bibliotheken sowie eigenen Modulen erleichtern.

Der folgende Code zeigt ein Beispiel für das Importieren des eingebauten Moduls fs.

const fs = require('fs'); // Dynamically import the file system module at runtime
const data = fs.readFileSync('example.txt', 'utf8'); // Read a file synchronously
console.log(data); // Output the loaded contents

Wichtige Punkte:

• fs : Ein in Node.js integriertes Modul (für Dateisystem‑Operationen).
• require(‚fs‘) : Importiert das fs‑Modul.
• readFileSync : Eine Funktion, die den Inhalt einer Datei synchron liest.

In diesem Beispiel macht require das Importieren von Funktionalität einfach und ermöglicht die sofortige Nutzung.

Grundsyntax von require

const moduleName = require('moduleName');

Parameter:

• moduleName : Der Name des zu importierenden Moduls. Dies kann ein eingebautes Modul, ein benutzerdefiniertes Modul oder ein npm-Paket sein.

Rückgabewert:

• Gibt das vom Modul exportierte Objekt oder die Funktion zurück.

Beispiel: Laden eines lokalen Moduls

const myModule = require('./myModule'); // './' indicates the current directory
console.log(myModule.sayHello());

Das CommonJS-Modulsystem

Die require-Funktion basiert auf dem CommonJS-Modulsystem. Dieses System wird hauptsächlich in serverseitigen Umgebungen verwendet und weist die folgenden Merkmale auf.

1. Synchrones Laden

• Module werden zur Laufzeit sequenziell geladen.
• Dies ist auf der Serverseite geeignet, aber auf der Clientseite werden oft asynchrone Ansätze bevorzugt.

1. Exportieren und Importieren von Modulen

• Auf der Modulseite wird module.exports verwendet, um Funktionalität nach außen freizugeben.
• Auf der Importseite wird require verwendet, um sie zu nutzen.

Beispiel: Exportieren eines Moduls

// myModule.js
module.exports = {
  sayHello: () => 'Hello, World!',
};

Dieses Modul kann von einer anderen Datei über require verwendet werden.

Vorteile von require

1. Einfache und leicht verständliche Syntax

• Intuitiv selbst für JavaScript-Anfänger.

1. Perfekte Passung mit Node.js

• Node.js ist um CommonJS herum aufgebaut, sodass require natürlich passt.

1. Einfacher Zugriff auf npm-Pakete

• Sie können Bibliotheken, die über npm (Node Package Manager) installiert wurden, leicht importieren.

Beispiel: Importieren des Express-Frameworks

const express = require('express');
const app = express();

Hinweise und Einschränkungen

1. Im Browser nicht direkt nutzbar

• require ist ein Node.js-spezifisches Feature und wird in Browsern nicht unterstützt.
• Um es im Browser zu verwenden, benötigen Sie einen Bundler wie Webpack oder Browserify.

1. Leistungsbedenken aufgrund synchronen Ladens

• Da Module zur Laufzeit sequenziell geladen werden, können große Anwendungen langsamere Ladezeiten erfahren.

Zusammenfassung

In diesem Abschnitt haben wir die grundlegende Rolle und Syntax der require-Funktion erklärt. Außerdem haben wir erläutert, wie sie sich zum CommonJS-System verhält, sowie ihre Vorteile und Einschränkungen.

Im nächsten Abschnitt erklären wir „Grundlegende Verwendung von require mit Codebeispielen“ und stellen praktische Anwendungsmöglichkeiten vor.

3. Grundlegende Verwendung von require (mit Codebeispielen)

In diesem Abschnitt erläutern wir die grundlegende Verwendung der JavaScript-require-Funktion im Detail, zusammen mit praktischen Codebeispielen.

Wie man Module importiert

1. Importieren eingebauter Module

Node.js stellt viele eingebaute Module bereit. Mit der require-Funktion können Sie diese Module einfach importieren.

Beispiel: Verwendung des Dateisystemmoduls (fs)

const fs = require('fs'); // Import the fs module
const data = fs.readFileSync('example.txt', 'utf8'); // Read the file synchronously
console.log(data); // Output the result

In diesem Beispiel wird das fs-Modul verwendet, um den Inhalt einer Datei zu lesen.

2. Importieren lokaler Module

Sie können eigene Module als Dateien in Ihrem Projekt erstellen und sie einfach mit require importieren.

Moduldatei (mathModule.js):

module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;

Importdatei (main.js):

const math = require('./mathModule'); // Import a local module
console.log(math.add(10, 5)); // Output: 15
console.log(math.subtract(10, 5)); // Output: 5

Wichtige Punkte:

• './' steht für das aktuelle Verzeichnis.
• Die Dateierweiterung .js kann weggelassen werden.

3. Importieren von npm-Paketen

Externe Bibliotheken, die über npm installiert wurden, können ebenfalls mit require importiert werden.

Beispiel: Verwendung des axios-Pakets

1. Paket installieren

   npm install axios
   

2. Codebeispiel

   const axios = require('axios'); // Import the axios library
   axios.get('https://api.example.com/data')
     .then(response => {
       console.log(response.data); // Display the data
     })
     .catch(error => {
       console.error(error); // Handle errors
     });
   

Wichtige Punkte:

• Über npm installierte Pakete werden im Ordner node_modules gespeichert.
• Deshalb können Sie es einfach verwenden, indem Sie require('axios') schreiben.

So verwenden Sie dynamisches require

Die require-Funktion kann Module auch dynamisch importieren. Dies ermöglicht es Ihnen, Module flexibel basierend auf Bedingungen zu wechseln.

Beispiel: Dynamischer Import

const moduleName = process.env.USE_MODULE || 'defaultModule';
const myModule = require(`./modules/${moduleName}`);
console.log(myModule.someFunction());

Wichtige Punkte:

• Sie können Module über Umgebungsvariablen wechseln, was für flexible Entwicklung und Tests nützlich ist.
• Da Module nur geladen werden, wenn sie benötigt werden, kann dies auch die Speichernutzung optimieren.

Häufige Fehler und Fehlerbehebung

1. Fehler: Modul nicht gefunden

Fehlerbeispiel:

Error: Cannot find module './myModule'

Ursachen:

• Falscher Dateipfad.
• Das Modul existiert nicht, oder die Erweiterung kann in einigen Fällen nicht weggelassen werden.

Lösung:

• Geben Sie den Dateipfad und die Erweiterung genau an.

  const myModule = require('./myModule.js'); // Explicitly include the extension
  

2. Ein externes Paket ist nicht installiert

Fehlerbeispiel:

Error: Cannot find module 'axios'

Ursache:

• Das npm-Paket ist nicht installiert.

Lösung:

npm install axios

Installieren Sie das Paket neu.

3. Fehler: Zirkuläre Abhängigkeit

Fehlerbeispiel:

TypeError: Cannot read property 'someFunction' of undefined

Ursache:

• Es tritt eine zirkuläre Abhängigkeit zwischen Modulen auf.

Lösung:

• Organisieren Sie die Modulabhängigkeiten neu, um zirkuläre Referenzen zu vermeiden.

Zusammenfassung

In diesem Abschnitt haben wir die grundlegende Verwendung der require-Funktion erklärt, einschließlich der Importierung von integrierten Modulen, lokalen Modulen und npm-Paketen mit Beispielen. Wir haben auch dynamisches require und Fehlerbehebung behandelt.

Im nächsten Abschnitt erklären wir „Die Unterschiede zwischen require und import“ im Detail, einschließlich ihrer Merkmale und wie man zwischen ihnen wählt.

4. Unterschiede zwischen require und import: CommonJS vs ES Modules

In JavaScript gibt es zwei Systeme zur Arbeit mit Modulen: CommonJS und ES Modules (ECMAScript Modules). Jedes System unterscheidet sich in der Verwendung und den unterstützten Umgebungen, daher ist es wichtig, das richtige für Ihr Projekt zu wählen. In diesem Abschnitt erklären wir die Unterschiede zwischen require und import im Detail.

Wichtige Unterschiede zwischen require und import

Merkmale und Verwendung von require

require wird in CommonJS verwendet, dem Standard-Modulsystem in Node.js.

Beispiel: CommonJS require

const math = require('./mathModule'); // Import a module
console.log(math.add(2, 3)); // Result: 5

Export-Seite (mathModule.js):

module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;

Merkmale:

• Unterstützt dynamische Imports, die flexibles Wechseln über Bedingungen ermöglichen.
• Lädt zur Laufzeit, was zu Szenarien passt, in denen Module bei Bedarf benötigt werden.
• Optimiert für serverseitige Umgebungen.

Merkmale und Verwendung von import

In ES Modules verwenden Sie import, um Module zu importieren. Dieser Ansatz wurde in ECMAScript 2015 (ES6) standardisiert.

Beispiel: ES Modules import

import { add, subtract } from './mathModule.js'; // Import a module
console.log(add(2, 3)); // Result: 5

Export-Seite (mathModule.js):

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Merkmale:

.

• Module werden im Voraus basierend auf statischer Analyse geladen.
• Da Module vor der Ausführung ausgewertet werden, sind Optimierung und Fehlersuche einfacher.
• Funktioniert auch in clientseitigen (Browser‑)Umgebungen.

Vergleich von require und import mit konkreten Beispielen

1. Wie Module geladen werden

require (CommonJS):

const fs = require('fs'); // Dynamically loaded at runtime

import (ES‑Module):

import fs from 'fs'; // Loaded statically before execution

2. Dynamische Importe

require:

if (process.env.ENV === 'development') {
  const debug = require('./debugModule');
  debug.log('Development mode');
}

import:

if (process.env.ENV === 'development') {
  import('./debugModule').then((debug) => {
    debug.log('Development mode');
  });
}

Wichtiger Punkt:

• require macht dynamische Importe einfach, aber bei import verwendet man typischerweise ein Promise‑basiertes asynchrones Importieren.

Wie man basierend auf dem Anwendungsfall wählt

1. Serverseitige Entwicklung (Node.js)

• Empfohlen: require (CommonJS)
• Grund: CommonJS ist die Vorgabe in Node.js, sodass es in vielen Setups ohne zusätzliche Konfiguration funktioniert.

1. Moderne browserbasierte Entwicklung

• Empfohlen: import (ES‑Module)
• Grund: ES‑Module sind der moderne JavaScript‑Standard und integrieren sich gut in Browser und Frontend‑Frameworks.

1. Hybride Umgebungen und neue Projekte

• Empfohlen: import (ES‑Module)
• Grund: Die Ausrichtung an modernen Spezifikationen hilft, langfristige Wartbarkeit und Kompatibilität zu gewährleisten.

Wie man von require zu import migriert

Um von CommonJS zu ES‑Modulen zu migrieren, folgen Sie diesen Schritten.

1. Ändern Sie die Dateierweiterung zu .mjs.
2. Ersetzen Sie module.exports‑Exporte durch export.
3. Ersetzen Sie require‑Importe durch import.

Beispiel:

// CommonJS
module.exports = { add, subtract };

// ES Modules
export { add, subtract };

Zusammenfassung

In diesem Abschnitt haben wir die Unterschiede zwischen require und import erklärt. Durch das Verständnis der jeweiligen Systemmerkmale, unterstützten Umgebungen und optimalen Anwendungsfälle können Sie Module effektiver verwalten.

Im nächsten Abschnitt erklären wir „Wie man require in einer Browser‑Umgebung verwendet“, einschließlich Werkzeuge und Konfigurationsbeispiele.

5. Wie man require in einer Browser‑Umgebung verwendet

Die require‑Funktion basiert auf dem CommonJS‑Modulsystem von Node.js, daher kann sie nicht direkt in einer Browser‑Umgebung verwendet werden. Das liegt daran, dass Browser das CommonJS‑Modulsystem nicht nativ unterstützen.

In der Webanwendungsentwicklung gibt es jedoch viele Situationen, in denen Sie eine ähnliche Funktionalität wie require benötigen. In diesem Abschnitt erläutern wir Lösungen, um require im Browser zu verwenden.

Warum require im Browser nicht funktioniert

1. CommonJS ist für den serverseitigen Einsatz konzipiert

• CommonJS wurde für Node.js entwickelt und lädt Module synchron auf der Serverseite.

1. Browser setzen stark auf asynchrone Verarbeitung

• In Browsern ist das asynchrone Laden von Skripten üblich. Aus diesem Grund ist das synchrone Laden von Modulen wie bei require nicht ideal.

1. Der Aufstieg von ES‑Modulen

• Modernes JavaScript hat die import‑Syntax standardisiert, und Browser unterstützen sie jetzt nativ.

Lösungen für die Verwendung von require im Browser

Um eine ähnliche Funktionalität wie require im Browser zu erreichen, können Sie einen Modul‑Bundler oder einen Transpiler verwenden.

1. Verwendung von Browserify

Browserify ist ein Werkzeug, das CommonJS‑Code in ein Format umwandelt, das im Browser läuft.

Schritte:

1. Installation

   npm install -g browserify
   

2. Beispiel für die Projektkonfiguration

index.js (Beispiel):

const math = require('./mathModule');
console.log(math.add(2, 3));

mathModule.js (Beispiel):

module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;

3. Build‑Befehl

   browserify index.js -o bundle.js
   

4. Fügen Sie das gebündelte Skript in eine HTML-Datei ein

   <!DOCTYPE html>
   <html lang="ja">
   <head>
     <meta charset="UTF-8">
     <title>Browserify Example</title>
   </head>
   <body>
     <script src="bundle.js"></script>
   </body>
   </html>
   

Nun wird Ihr Code mit require im Browser ausgeführt.

2. Webpack verwenden

Webpack ist ein beliebter Modul-Bundler und wird in modernen JavaScript-Projekten weit verbreitet verwendet.

Schritte:

1. Installieren

   npm install webpack webpack-cli --save-dev
   

2. Beispiel für Projektstruktur

src/index.js:

const math = require('./mathModule');
console.log(math.add(10, 20));

src/mathModule.js:

module.exports.add = (a, b) => a + b;

3. Erstellen Sie webpack.config.js:

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
   };
   

4. Build-Befehl:

   npx webpack
   

5. Fügen Sie das gebündelte Skript in eine HTML-Datei ein:

   <!DOCTYPE html>
   <html lang="ja">
   <head>
     <meta charset="UTF-8">
     <title>Webpack Example</title>
   </head>
   <body>
     <script src="./dist/bundle.js"></script>
   </body>
   </html>
   

ES-Module verwenden (Empfohlen)

Moderne Browser unterstützen ES-Module nativ, was das Modul-Management viel einfacher macht.

Beispiel:

import { add } from './mathModule.js';
console.log(add(3, 4));

Fügen Sie type=“module“ in HTML hinzu:

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

Da dieser Ansatz moderne Standards folgt, ist keine spezielle Transpilierung erforderlich, und die Kompatibilität wird langfristig gewahrt.

Welche Methode sollten Sie wählen?

Zusammenfassung

In diesem Abschnitt haben wir die Herausforderungen und Lösungen für die Verwendung von require in einer Browser-Umgebung erklärt.

1. Verstehen Sie, warum require nicht direkt in Browsern funktioniert.
2. Verwenden Sie Modul-Bundler (Browserify, Webpack), um es zum Laufen zu bringen.
3. Moderne Browser empfehlen die Verwendung von ES-Modulen.

Im nächsten Abschnitt, betitelt „Ein praktischer Leitfaden zu Modul-Bundlern“, erklären wir Konfigurationsbeispiele für Webpack und Browserify im Detail.

6. Praktischer Leitfaden zu Modul-Bundlern: Konfigurationsbeispiele für Webpack & Browserify

In diesem Abschnitt erklären wir Konfigurationsbeispiele für Webpack und Browserify, Tools, die das JavaScript-Modul-Management stärken. Durch die Verwendung dieser Tools können Sie auch require in der Browser-Umgebung verwenden.

1. Praktischer Leitfaden zu Webpack

Webpack wird als Modul-Bundler weit verbreitet verwendet. Es ist besonders geeignet für moderne Front-End-Entwicklung und kann Code mit require und import in ein browserfreundliches Format umwandeln.

Beispiel für grundlegende Webpack-Einrichtung

1. Projekt initialisieren

npm init -y

2. Erforderliche Pakete installieren

npm install webpack webpack-cli --save-dev

3. Verzeichnisstruktur

/project
  ├── src/
  │   ├── index.js
  │   ├── mathModule.js
  ├── dist/
  │   ├── index.html
  ├── webpack.config.js
  ├── package.json

4. Beispiel-Quellcode

src/mathModule.js:

module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;

src/index.js:

const math = require('./mathModule');
console.log(math.add(2, 3));

5. Erstellen der Webpack-Konfigurationsdatei

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point
  output: {
    filename: 'bundle.js', // Output file name
    path: path.resolve(__dirname, 'dist') // Output folder
  },
  mode: 'development' // Development mode
};

6. Build ausführen

npx webpack

Dieser Befehl generiert dist/bundle.js.

7. In HTML einbetten

dist/index.html:

.„`

Dies ermöglicht es, Code, der `require` verwendet, im Browser auszuführen.



### **2. Praktischer Leitfaden für Browserify**



**Browserify** konvertiert das Node.js-Modulmanagement in ein Format, das im Browser ausgeführt werden kann. Es ist am besten für einfache Projekte und kleine Anwendungen geeignet.



#### **Einfaches Browserify-Setup-Beispiel**



**1. Projekt initialisieren**

npm init -y

**2. Erforderliche Pakete installieren**

npm install -g browserify

**3. Verzeichnisstruktur**

/project ├── index.js ├── mathModule.js ├── index.html

**4. Beispiel-Quellcode**



**mathModule.js:**

module.exports.add = (a, b) => a + b; module.exports.subtract = (a, b) => a – b;

**index.js:**

const math = require(‚./mathModule‘); console.log(math.add(5, 10));

**5. Build ausführen**

browserify index.js -o bundle.js

**6. In HTML einbetten**



**index.html:**

Damit wird Code, der `require` verwendet, im Browser ausführbar.



### **3. Vergleich: Webpack vs Browserify**


Feature
Webpack
Browserify
Target projects
Large and complex projects
Small and simple projects
Flexibility
Highly extensible with plugins and loaders
Simple and easy configuration
ES Modules support
Supported by default
Requires a separate transpiler (e.g., Babel)
Performance optimization
Advanced optimization features available
Fewer optimization features
Initial learning cost
Higher
Lower




**Empfohlene Umgebungen:**



* **Webpack:** Am besten für moderne Entwicklungsumgebungen und groß angelegte Projekte.
* **Browserify:** Am besten für einfache Werkzeuge, kleine Projekte und Lernzwecke.



### Zusammenfassung



In diesem Abschnitt haben wir detaillierte Setup-Beispiele für **Webpack** und **Browserify** erklärt, die als Modul-Bündler weit verbreitet sind.



**Kurze Zusammenfassung:**



1. Webpack bietet große Erweiterbarkeit und Optimierung, wodurch es für groß angelegte Entwicklungen geeignet ist.
2. Browserify ist einfach und am besten für kleine Projekte und zum Lernen geeignet.
3. In modernen Browsern sollte man ebenfalls die Verwendung von ES-Modules in Betracht ziehen.



Im nächsten Abschnitt mit dem Titel „Ein Projekt mit require bauen“ werden wir ein praktisches Anwendungsentwicklungsbeispiel vorstellen.







## 7. Praktisches Beispiel: Ein Projekt mit require bauen



In diesem Abschnitt gehen wir ein konkretes Beispielprojekt durch, das mit der `require`-Funktion gebaut wurde. Von der Grundkonfiguration bis zur Nutzung externer Bibliotheken und lokaler Module lernen Sie die praktische Anwendung anhand realer Codebeispiele.



### 1. Projektübersicht



#### **Projektname:** Simple Calculator Application



#### **Ziel:**



* Ein einfaches Projekt erstellen, das lokale Module und externe Pakete kombiniert.
* Die `require`-Funktion verwenden, um mehrere Funktionen in Module zu trennen.



### 2. Projektstruktur und Umgebungseinrichtung



#### **Verzeichnisstruktur:**

/calculator-app ├── src/ │ ├── index.js │ ├── mathModule.js │ ├── logger.js ├── package.json ├── README.md

#### **Einrichtungsschritte:**



1. Projektverzeichnis erstellen

mkdir calculator-app cd calculator-app

2. Projekt mit npm initialisieren

npm init -y

3. Erforderliche Pakete installieren

npm install chalk moment

* **chalk** : Eine Bibliothek, um der Konsolenausgabe Farben hinzuzufügen.
* **moment** : Eine Bibliothek, die die Arbeit mit Datum und Zeit erleichtert.



### 3. Beispielcode



#### 1. mathModule.js: Ein Modul, das Berechnungsfunktionen bereitstellt

module.exports.add = (a, b) => a + b; module.exports.subtract = (a, b) => a – b; module.exports.multiply = (a, b) => a * b; module.exports.divide = (a, b) => { if (b === 0) { throw new Error(‚Cannot divide by 0‘); } return a / b; };

#### 2. logger.js: Ein Modul, das Protokollierungsfunktionen bereitstellt

const chalk = require(‚chalk‘); // Colored console output const moment = require(‚moment‘); // Date/time utility library

module.exports.log = (message) => { const time = moment().format(‚YYYY-MM-DD HH:mm:ss‘); console.log(chalk.green([${time}] ${message})); };

#### 3. index.js: Einstiegspunkt der Anwendung

const math = require(‚./mathModule‘); const logger = require(‚./logger‘);

// Calculation inputs const a = 10; const b = 5;

try { logger.log(Addition: ${math.add(a, b)}); logger.log(Subtraction: ${math.subtract(a, b)}); logger.log(Multiplication: ${math.multiply(a, b)}); logger.log(Division: ${math.divide(a, b)}); } catch (error) { console.error(error.message); }

### 4. Wie man das Projekt ausführt



1. Programm ausführen

node src/index.js

2. Beispielausgabe

In diesem Beispiel werden die Ergebnisse des Rechners mit einem Logging‑Modul kombiniert, wodurch die Anwendung praktischer und wiederverwendbarer wird.



### 5. Projekt‑Erweiterungsideen



1. **Fehlerbehandlung verbessern**


* Fehler wie Division durch Null korrekt abfangen und anzeigen.


2. **Neue Funktionen hinzufügen**


* Ein Modul für trigonometrische Funktionen oder Exponentialberechnungen erstellen.



**Beispiel: trigModule.js**

module.exports.sin = (angle) => Math.sin(angle); module.exports.cos = (angle) => Math.cos(angle); module.exports.tan = (angle) => Math.tan(angle);

**Erweiterungsbeispiel:**

const trig = require(‚./trigModule‘); logger.log(sin(30 degrees): ${trig.sin(Math.PI / 6)});

3. **Eine Konfigurationsdatei einführen**


* Eine Umgebung-/Konfigurationsdatei erstellen, um das Log‑Level und die Ausgabeformatierung zu steuern.



### 6. Projektzusammenfassung



In diesem Abschnitt haben wir ein praktisches Projektbeispiel vorgestellt, das mit der `require`‑Funktion gebaut wurde.



**Kurze Zusammenfassung:**



1. Funktionen in Module aufteilen, um Wiederverwendbarkeit und Wartbarkeit zu verbessern.  
2. Externe Pakete (chalk, moment) kombinieren, um die Funktionalität zu erweitern.  
3. Praktikabilität verbessern, indem die Fehlerbehandlung und das Logging gestärkt werden.



Durch das Hinzufügen weiterer Funktionen zu diesem Projekt kannst du reale Entwicklungsfähigkeiten durch praktische Übungen aufbauen.



Im nächsten Abschnitt mit dem Titel „Häufig gestellte Fragen (FAQ)“ behandeln wir gängige Fragen und Tipps zur Fehlersuche im Zusammenhang mit der `require`‑Funktion.







## 8. Häufig gestellte Fragen (FAQ): Häufige require‑Fragen lösen



In diesem Abschnitt fassen wir häufige Fragen und Fehler zusammen, die beim Einsatz der `require`‑Funktion auftreten. Durch Fehlersuche kannst du ruhiger und selbstbewusster entwickeln.



### **1. Kann ich require in einer ES6‑Umgebung verwenden?**



**Antwort:**  
Nein, die `require`‑Funktion basiert auf dem **CommonJS**‑System und wird hauptsächlich in der Node.js‑Umgebung verwendet. Da **ES‑Module** in ES6‑Umgebungen standardisiert sind, wird empfohlen, stattdessen `import` zu nutzen.



**Beispiel:**

// CommonJS const fs = require(‚fs‘);

// ES Modules import fs from ‚fs‘;

**Wichtiger Hinweis:**  
Wenn du `require` in einer ES6‑Umgebung verwenden möchtest, musst du möglicherweise Node.js‑Optionen wie `--experimental-modules` aktivieren oder einen Transpiler (z. B. Babel) einsetzen, um die Kompatibilität zu gewährleisten.



### **2. Ich erhalte einen „module not found“-Fehler bei der Verwendung von require. Was soll ich tun?**



**Fehlerbeispiel:**

Error: Cannot find module ‚./myModule‘

**Ursachen:**



1. Falscher Dateipfad.  
2. Fehler beim Weglassen der Dateierweiterung.  
3. Das Modul existiert nicht oder ist nicht installiert.



**Lösungen:**



1. Den korrekten Dateipfad und die Erweiterung angeben.

const myModule = require(‚./myModule.js‘); // Explicitly include the extension

2. Falls es ein Paket ist, die Installation überprüfen.

npm install module-name

3. Die Modul‑Suchpfade prüfen.

console.log(module.paths);

### **3. Kann ich require und import im selben Projekt mischen?**



**Antwort:**  
Ja, in manchen Fällen kann man sie mischen, aber man muss vorsichtig sein.



**Beispiel:**

const fs = require(‚fs‘); // CommonJS import path from ‚path‘; // ES Modules

**Hinweise:**



* Wenn du die Dateierweiterung zu `.mjs` änderst, kannst du `require` nicht verwenden.  
* Möglicherweise benötigst du einen Modul‑Bundler oder Transpiler, um die Kompatibilität sicherzustellen.



### **4. Kann ich require dynamisch verwenden?**

**Antwort:**  
Ja, `require` unterstützt dynamische Imports. Dies ist einer der größten Unterschiede im Vergleich zu `import`.



**Beispiel:**

if (process.env.NODE_ENV === ‚development‘) { const debug = require(‚./debugModule‘); debug.log(‚Development mode‘); }

**Wichtiger Punkt:**



* Sie können nur die Module laden, die Sie je nach Umgebung benötigen, was für Entwicklung und Testen hilfreich ist.
* Da `import` auf statischer Analyse basiert, funktioniert es standardmäßig nicht so.



### **5. Was ist require.cache?**



**Antwort:**  
`require.cache` ist ein Objekt, das von Node.js verwendet wird, um Module zu cachen. Dies verbessert die Leistung, indem verhindert wird, dass dasselbe Modul wiederholt geladen wird.



**Beispiel:**

const myModule1 = require(‚./myModule‘); const myModule2 = require(‚./myModule‘);

console.log(myModule1 === myModule2); // true

**Beispiel: Cache leeren**

delete require.cache[require.resolve(‚./myModule‘)];

**Hinweis:**



* Wenn Sie den Cache manuell leeren, achten Sie auf Modulabhängigkeiten.



### **6. Wie kann ich require in einer Browser-Umgebung verwenden, wo es nicht unterstützt wird?**



**Antwort:**  
In einer Browser-Umgebung kann `require` nicht direkt verwendet werden. Sie benötigen einen der folgenden Ansätze.



1. **Verwenden Sie einen Modul-Bundler:**


* Bündeln Sie Ihren Code mit Webpack oder Browserify.


1. **Verwenden Sie ES Modules:**


* Verwenden Sie stattdessen natives `import`.



**Beispiel:**

import { add } from ‚./mathModule.js‘; console.log(add(3, 4));

**HTML-Datei:**

### **7. Was, wenn ein altes externes Modul Fehler mit require verursacht?**



**Antwort:**  
Ältere Module sind möglicherweise nicht kompatibel mit den neuesten Versionen. In diesem Fall versuchen Sie die folgenden Lösungen.



1. Aktualisieren Sie das Modul auf die neueste Version.

npm update module-name

2. Erwägen Sie eine alternative Bibliothek, die neuere Versionen unterstützt.
3. Verwenden Sie einen Transpiler (Babel), um Kompatibilität zu wahren.



### **8. Kann ich JSON-Dateien mit require laden?**



**Antwort:**  
Ja, Sie können JSON-Dateien direkt mit `require` laden.



**Beispiel:**

const data = require(‚./config.json‘); console.log(data.key); // Access values from the JSON „`

Hinweis:

• JSON-Dateien werden als Objekte geladen, ohne manuelles Parsen.
• In neueren Node.js-Versionen ist das Importieren von JSON mit import ebenfalls möglich.

Zusammenfassung

In diesem Abschnitt haben wir häufig gestellte Fragen und Antworten zur require-Funktion behandelt, mit Fokus auf Umgebungsunterschiede und Fehlerbehebung.

Kurze Zusammenfassung:

1. Wählen Sie zwischen require und import je nach Umgebung.
2. Achten Sie bei der Fehlerbehebung auf Dateipfade und Caching.
3. Verwenden Sie Bundler oder ES Modules, um mit moderner Entwicklung kompatibel zu bleiben.

Im nächsten Abschnitt, betitelt „Zusammenfassung und nächste Schritte“, werden wir die Schlüsselpunkte des gesamten Artikels überprüfen und Vorschläge für weiteres Lernen machen.

9. Zusammenfassung und nächste Schritte

In diesem Artikel haben wir die JavaScript-require-Funktion detailliert erklärt, von den Grundlagen bis zu fortgeschrittenen Anwendungsfällen. In diesem Abschnitt werden wir überprüfen, was Sie gelernt haben, und nächste Schritte vorschlagen, um Ihr Verständnis zu vertiefen.

1. Überprüfung der Schlüsselpunkte

1. Warum Modulverwaltung wichtig ist

• Es erleichtert das Aufteilen von Code in wiederverwendbare Teile und verbessert Wartbarkeit und Skalierbarkeit.

1. Das Kernkonzept und die Rolle von require

• require ist der Standardmechanismus zum Laden von Modulen im CommonJS-Modulsystem.

1. Wie man require mit praktischen Code-Beispielen verwendet

• Wir haben erklärt, wie man eingebaute Module, lokale Module und npm-Pakete durch reale Beispiele importiert.

1. Unterschiede zwischen require und import

• Wir haben CommonJS und ES Modules verglichen und erklärt, wie man den richtigen Ansatz je nach Umgebung wählt.

1. Wie man require im Browser verwendet

• Wir haben erklärt, wie man Bundler wie Webpack und Browserify verwendet, um require-Stil-Code im Browser zu ermöglichen.

1. Beispiele für die Nutzung von Module Bundlern

• Wir haben praktische Einrichtungsbeispiele vorgestellt und erklärt, wie Bundler bei der Handhabung von Modulabhängigkeiten helfen.

1. Beispiel für den Projektbau

• Wir haben ein einfaches Rechnerprojekt mit require erstellt, um die Nutzung von Modulen in der realen Welt zu demonstrieren.

1. FAQ und Fehlerbehebung

• Wir haben gängige Fragen und Tipps zur Fehlerbehandlung zusammengefasst, um Ihnen zu helfen, Probleme effizienter zu lösen.

2. Vorgeschlagene nächste Schritte für das Lernen

1. Lernen Sie ES Modules und moderne JavaScript-Standards

Da ES Modules zum Standard in modernem JavaScript werden, sollten Sie import und export tiefer erkunden.

• Empfohlene Themen: Dynamische Imports, Standard-Exports und benannte Exports.
• Verwandte Technologien: Verwalten von Modulen mit TypeScript und Typdefinitionen.

2. Fortgeschrittene Nutzung von Module Bundlern

Lernen Sie, wie Sie Builds optimieren und Plugins mit Tools wie Webpack oder Vite konfigurieren.

• Schwerpunktbereiche: Code-Splitting, Tree Shaking und Cache-Optimierung.

3. Integration mit Server-seitiger Entwicklung

Erkunden Sie den Aufbau von API-Servern und die Integration von Datenbanken mit Node.js und require.

• Fortgeschrittene Beispiele: Erstellen von REST-APIs mit Express oder Fastify.

4. Moderne JavaScript-Frameworks übernehmen

Stärken Sie die Modulverwaltung, indem Sie mit Front-End-Frameworks wie React oder Vue.js arbeiten.

• Beispiel: Implementierung von State-Management mit React Hooks und Context API.

5. Test- und Debugging-Fähigkeiten verbessern

Lernen Sie modulbasierte Test- und Debugging-Techniken, um zuverlässigeren Code zu schreiben.

• Empfohlene Tools: Unit-Testing mit Jest oder Mocha.

3. Zusätzliche Ressourcen und Referenzen

• Offizielle Dokumentation:
• Node.js Offizielle Website
• MDN Web Docs – JavaScript Modules
• Online-Lernplattformen:
• Codecademy – Node.js-Kurse
• Udemy – Modulverwaltung und Bundling-Tools
• Übungs-Repositories:
• Verbessern Sie Ihre praktischen Fähigkeiten, indem Sie Open-Source-Projekte auf GitHub erkunden.

4. Abschließende Zusammenfassung

Die require-Funktion ist ein zentraler Bestandteil der Modulverwaltung in Node.js und spielt eine wichtige Rolle bei der Verbesserung der Code-Wiederverwendbarkeit und Wartbarkeit. Allerdings sind ES Modules nun in modernem JavaScript standardisiert, sodass die Wahl des richtigen Ansatzes je nach den Zielen und der Umgebung Ihres Projekts essenziell ist.

Wichtigste Lernerkenntnisse:

• Vertiefen Sie Ihr Verständnis moderner Standards für die Modulverwaltung.
• Verwenden Sie Module Bundler, um effiziente Entwicklungsumgebungen aufzubauen.
• Wenden Sie Ihre Fähigkeiten in praktischen Projekten und realer Entwicklung an.

Verwenden Sie diesen Artikel als Grundlage, um Ihre Fähigkeiten in der JavaScript-Modulverwaltung zu stärken und skalierbarere Anwendungen zu entwickeln. Viel Erfolg bei Ihrer zukünftigen JavaScript-Entwicklungsreise!

10. Abschließende Zusammenfassung und Integration der vollständigen Sektion

In diesem Artikel haben wir die JavaScript-Modulverwaltung mit der require-Funktion behandelt, von grundlegenden Konzepten bis hin zur fortgeschrittenen Nutzung. Hier fassen wir zusammen, was Sie in allen Abschnitten gelernt haben, und schlagen nächste Schritte vor.

Überprüfung der wichtigsten Erkenntnisse

1. Warum Modulverwaltung wichtig ist Die Modulverwaltung verbessert die Wiederverwendbarkeit von Code und macht Projekte einfacher zu warten und zu skalieren. Durch die Verwendung von require können Sie JavaScript-Code in funktionale Module aufteilen und effizienter entwickeln.
2. Die Grundlagen der require-Funktion require basiert auf dem CommonJS-Modulsystem und wird hauptsächlich in der Node.js-Umgebung verwendet. Sie haben die Kernmethode zum Importieren von Modulen gelernt.
3. Unterschiede zwischen require und import Sowohl require als auch import unterstützen die Modulverwaltung, aber require gehört zu Node.js CommonJS, während import zu ES Modules gehört. Die Wahl des Richtigen hängt von Ihrer Umgebung und den Projektanforderungen ab.
4. Wie man require im Browser verwendet Da require nicht direkt im Browser funktioniert, haben Sie gelernt, wie man Modul-Bundler (Webpack und Browserify) als Lösung verwendet. In der modernen Entwicklung werden auch ES Modules weit verbreitet verwendet.
5. Ein praktisches Projektbeispiel Sie haben ein einfaches Rechner-Projekt mit require erstellt, das die Modulerstellung, den Import und die Fehlerbehandlung abdeckt. Dies hilft Ihnen, wesentliche Fähigkeiten für die reale Entwicklung zu erwerben.
6. Fehlerbehebung Sie haben Lösungen für gängige Fehler und Probleme im Zusammenhang mit require gelernt, was ein reibungsloseres Problemlösen in realen Entwicklungsszenarien ermöglicht.
7. Nächste Schritte Von hier aus sollten Sie ES Modules, moderne Bundler (Webpack, Vite) erkunden und diese Fähigkeiten in realen Projekten anwenden. Sie können sich auch in die serverseitige Entwicklung und Front-End-Frameworks ausdehnen.

Empfohlener Lernfokus für die Zukunft

1. Tiefer in ES Modules eintauchen Seit ES6 sind import und export standardisiert und werden weit verbreitet in Browsern und Node.js verwendet. Stellen Sie sicher, dass Sie ES Modules gründlich beherrschen.
2. Modul-Bundler effektiv nutzen Lernen Sie, Tools wie Webpack und Vite zu verwenden, um effiziente Entwicklungsumgebungen zu erstellen. Insbesondere ist das Lernen von Optimierungstechniken wie Code-Splitting und Tree Shaking sehr vorteilhaft.
3. Serverseitige Entwicklung und API-Erstellung Werden Sie mit dem Erstellen von APIs mit Node.js vertraut. Das Lernen von Frameworks wie Express oder Fastify wird empfohlen.
4. Front-End-Frameworks lernen Verwenden Sie beliebte Frameworks wie React oder Vue.js, um moderne Front-End-Anwendungen zu erstellen. Die Modulverwaltung ist ein Schlüsselkonzept in diesen Ökosystemen.
5. Test- und Debugging-Fähigkeiten verbessern Lernen Sie Unit-Testing mit Tools wie Jest oder Mocha, um zuverlässigen und wartbaren Code zu schreiben.

Zusätzliche Ressourcen und Lernplattformen

• Offizielle Node.js-Dokumentation: Node.js Official Website
• MDN Web Docs – JavaScript Modules: MDN Web Docs – JavaScript Modules
• Online-Lernplattformen: Codecademy – Node.js lernen Udemy – Kurse zu Modulverwaltung und Bundling-Tools
• GitHub: Verwenden Sie Open-Source-Projekte, um reale Code-Muster und die Nutzung von Bibliotheken zu lernen.

Abschließende Zusammenfassung

Durch diese Anleitung sollten Sie nun ein solides Verständnis der Modulverwaltung mit der require-Funktion haben und in der Lage sein, viele gängige Szenarien zu bewältigen. In Zukunft sollten Sie weiterhin neue Tools und moderne Standards lernen und sie in realen Projekten anwenden, um Ihre Fähigkeiten zu verbessern. Ein tiefes Verständnis der Modulverwaltung ist einer der wichtigsten Schritte, um sauberen, effizienten und skalierbaren JavaScript-Code zu schreiben.

Bleiben Sie am Lernen und Bauen – danke fürs Lesen!