dhbw 03-04 (node.js basics+advanced): cjs → esm in code-beispielen (import + node:-präfix), legacy-cjs als vergleichsbeispiel markiert, einheitliche cover, font 1.7→1.4rem, fragen-slides raus, __dirname/__filename via import.meta.url
This commit is contained in:
@@ -17,7 +17,7 @@ section.invert {
|
||||
--color-foreground: #fff;
|
||||
}
|
||||
section {
|
||||
font-size: 1.7rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h1 {
|
||||
color: #005f8a;
|
||||
@@ -50,6 +50,30 @@ a {
|
||||
<!-- _header: '' -->
|
||||
<!-- _backgroundColor: #001520 -->
|
||||
|
||||
# Web Engineering
|
||||
|
||||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||||
|
||||
**Sommersemester 2026** · Sitzung 4 — Node.js: Scripting, Running and Building
|
||||
|
||||
---
|
||||
|
||||
# Inhalt
|
||||
|
||||
1. Node.js: was und warum
|
||||
2. `node --check`, `node -e` (One-Liner)
|
||||
3. Module: `require` / `import`, `__dirname` / `__filename`
|
||||
4. HTTP-Server (built-in)
|
||||
5. `fs` — Dateien lesen / schreiben
|
||||
6. `package.json` — Aufbau und Lifecycle
|
||||
7. npm Scripts
|
||||
8. Module exportieren
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _backgroundColor: #001520 -->
|
||||
|
||||
# Node.js – Scripting, Running and Building
|
||||
|
||||
---
|
||||
@@ -89,8 +113,10 @@ node -e "console.log('Hallo Welt')"
|
||||
# String
|
||||
node -e "console.log('Hello ' + process.argv[2])" Welt
|
||||
|
||||
# File reading
|
||||
node -e "console.log(require('fs').readFileSync('data.json'))"
|
||||
# File reading (ESM via --input-type)
|
||||
node --input-type=module -e \
|
||||
"import { readFileSync } from 'node:fs'; \
|
||||
console.log(readFileSync('data.json', 'utf8'))"
|
||||
|
||||
# JSON parsen
|
||||
node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'
|
||||
@@ -98,70 +124,81 @@ node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'
|
||||
|
||||
---
|
||||
|
||||
# require() – Module laden
|
||||
# Module laden – ESM (modern)
|
||||
|
||||
`"type": "module"` in `package.json` einschalten.
|
||||
|
||||
```javascript
|
||||
// Eigene Datei
|
||||
const utils = require('./utils');
|
||||
// Eigene Datei (Endung .js erforderlich!)
|
||||
import { add, greet } from "./utils.js";
|
||||
|
||||
// npm Modul
|
||||
const express = require('express');
|
||||
// npm Modul (default + named import)
|
||||
import express from "express";
|
||||
import { Router } from "express";
|
||||
|
||||
// Built-in
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
// Built-in (mit "node:"-Präfix)
|
||||
import { readFileSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
```
|
||||
|
||||
<small>**Legacy CJS:** `const express = require("express")` — funktioniert noch, aber ESM ist heute Standard.</small>
|
||||
|
||||
---
|
||||
|
||||
# __dirname und __filename
|
||||
# Pfad-Auflösung in ESM
|
||||
|
||||
```javascript
|
||||
// Aktuelles Verzeichnis (Node.js)
|
||||
console.log(__dirname); // /home/user/project/src
|
||||
console.log(__filename); // /home/user/project/src/app.js
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { dirname, join } from "node:path";
|
||||
|
||||
// Pfad joinen
|
||||
const configPath = path.join(__dirname, '..', 'config.json');
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const configPath = join(__dirname, "..", "config.json");
|
||||
```
|
||||
|
||||
<small>In ESM gibt es **kein** automatisches `__dirname` / `__filename` (anders als CJS). Über `import.meta.url` rekonstruieren.</small>
|
||||
|
||||
---
|
||||
|
||||
# HTTP Server mit Node.js (Built-in)
|
||||
|
||||
**ESM** (modern, `"type": "module"` in `package.json`):
|
||||
```javascript
|
||||
const http = require('http');
|
||||
import { createServer } from "node:http";
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' });
|
||||
res.end('<h1>Hallo Welt!</h1>');
|
||||
const server = createServer((req, res) => {
|
||||
res.writeHead(200, { "Content-Type": "text/html" });
|
||||
res.end("<h1>Hallo Welt!</h1>");
|
||||
});
|
||||
|
||||
server.listen(3000, () => {
|
||||
console.log('Server läuft auf Port 3000');
|
||||
console.log("Server läuft auf Port 3000");
|
||||
});
|
||||
```
|
||||
|
||||
<small>**CommonJS** (legacy): `const http = require("http");` — funktioniert noch, aber neue Projekte nutzen ESM.</small>
|
||||
|
||||
---
|
||||
|
||||
# fs – Dateien lesen/schreiben
|
||||
|
||||
```javascript
|
||||
const fs = require('fs');
|
||||
import { readFile, readFileSync, writeFile } from "node:fs";
|
||||
import { readFile as readFileAsync } from "node:fs/promises";
|
||||
|
||||
// Async
|
||||
fs.readFile('data.json', 'utf8', (err, data) => {
|
||||
// Promise-API (empfohlen, modern)
|
||||
const data = await readFileAsync("data.json", "utf8");
|
||||
console.log(JSON.parse(data));
|
||||
|
||||
// Callback-API
|
||||
readFile("data.json", "utf8", (err, data) => {
|
||||
if (err) throw err;
|
||||
console.log(JSON.parse(data));
|
||||
});
|
||||
|
||||
// Sync
|
||||
const content = fs.readFileSync('data.json', 'utf8');
|
||||
|
||||
// Write
|
||||
fs.writeFile('output.txt', 'Hallo Welt', (err) => {
|
||||
if (err) throw err;
|
||||
});
|
||||
// Sync (nur für Setup / Scripts)
|
||||
const content = readFileSync("data.json", "utf8");
|
||||
```
|
||||
|
||||
---
|
||||
@@ -206,23 +243,26 @@ npm start → start (direkt)
|
||||
|
||||
---
|
||||
|
||||
# Node.js Module – exports
|
||||
# Node.js Module – exports (ESM)
|
||||
|
||||
```javascript
|
||||
// utils.js
|
||||
module.exports = {
|
||||
add: (a, b) => a + b,
|
||||
greet: (name) => `Hallo ${name}!`
|
||||
};
|
||||
// utils.js — named exports
|
||||
export const add = (a, b) => a + b;
|
||||
export const greet = (name) => `Hallo ${name}!`;
|
||||
|
||||
// Oder einzelne Exporte
|
||||
module.exports.add = (a, b) => a + b;
|
||||
// utils.js — default export
|
||||
export default {
|
||||
add,
|
||||
greet
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
```javascript
|
||||
// nutzen
|
||||
import { add, greet } from "./utils.js"; // named
|
||||
import utils from "./utils.js"; // default
|
||||
import utils, { add } from "./utils.js"; // beides
|
||||
```
|
||||
|
||||
# Fragen?
|
||||
<small>**Legacy CJS:** `module.exports = { add, greet }` + `const { add } = require("./utils")`.</small>
|
||||
|
||||
1. Wie startest du einen Node.js Server auf Port 8080?
|
||||
2. Was macht `node --check`?
|
||||
3. Wozu dient `package.json`?
|
||||
@@ -17,7 +17,7 @@ section.invert {
|
||||
--color-foreground: #fff;
|
||||
}
|
||||
section {
|
||||
font-size: 1.7rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h1 {
|
||||
color: #005f8a;
|
||||
@@ -50,7 +50,30 @@ a {
|
||||
<!-- _header: '' -->
|
||||
<!-- _backgroundColor: #001520 -->
|
||||
|
||||
# node.js – Advanced
|
||||
# Web Engineering
|
||||
|
||||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||||
|
||||
**Sommersemester 2026** · Sitzung 5 — Express API, CRUD und Middlewares
|
||||
|
||||
---
|
||||
|
||||
# Inhalt
|
||||
|
||||
1. Node.js — Fun Facts & alternative Runtimes
|
||||
2. `process` — Signal-Handling, Graceful Shutdown
|
||||
3. Express — Setup, Routing
|
||||
4. Middlewares (eigene + built-in)
|
||||
5. CRUD-Endpunkte (Create, Read, Update, Delete)
|
||||
6. Error Handling
|
||||
7. WebSockets
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _backgroundColor: #001520 -->
|
||||
|
||||
# Node.js – Advanced
|
||||
|
||||
---
|
||||
|
||||
@@ -87,14 +110,20 @@ process.exit(1); // Fehler
|
||||
# node.js Module System
|
||||
|
||||
```javascript
|
||||
// ES Modules
|
||||
import express from 'express';
|
||||
import { port } from './src/config/constants.js';
|
||||
|
||||
// CommonJS
|
||||
const fs = require('fs');
|
||||
// ES Modules (modern, "type": "module")
|
||||
import express from "express";
|
||||
import { port } from "./src/config/constants.js";
|
||||
import { readFileSync } from "node:fs";
|
||||
```
|
||||
|
||||
```javascript
|
||||
// CommonJS (legacy)
|
||||
const express = require("express");
|
||||
const fs = require("fs");
|
||||
```
|
||||
|
||||
→ Neue Projekte: ESM. Built-ins immer mit `node:`-Präfix.
|
||||
|
||||
---
|
||||
|
||||
# HTTP Request mit node-fetch
|
||||
@@ -249,10 +278,3 @@ wss.on('connection', (ws) => {
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Fragen?
|
||||
|
||||
1. Wozu dient `process.on('SIGINT')`?
|
||||
2. Was macht `app.use(express.json())`?
|
||||
3. Wie erstellst du einen GET-Endpoint mit Express?
|
||||
Reference in New Issue
Block a user