public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
libretech
2026-05-07 14:20:46 +02:00
parent 79fbe046d9
commit 5c25b14a59
2 changed files with 122 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/dhbw/03_nodejs_basics.md
+85 -45
View File
@@ -17,7 +17,7 @@ section.invert {
--color-foreground: #fff; --color-foreground: #fff;
} }
section { section {
font-size: 1.7rem; font-size: 1.4rem;
} }
h1 { h1 {
color: #005f8a; color: #005f8a;
@@ -50,6 +50,30 @@ a {
<!-- _header: '' --> <!-- _header: '' -->
<!-- _backgroundColor: #001520 --> <!-- _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 # Node.js – Scripting, Running and Building
--- ---
@@ -89,8 +113,10 @@ node -e "console.log('Hallo Welt')"
# String # String
node -e "console.log('Hello ' + process.argv[2])" Welt node -e "console.log('Hello ' + process.argv[2])" Welt
# File reading # File reading (ESM via --input-type)
node -e "console.log(require('fs').readFileSync('data.json'))" node --input-type=module -e \
"import { readFileSync } from 'node:fs'; \
console.log(readFileSync('data.json', 'utf8'))"
# JSON parsen # JSON parsen
node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}' 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 ```javascript
// Eigene Datei // Eigene Datei (Endung .js erforderlich!)
const utils = require('./utils'); import { add, greet } from "./utils.js";
// npm Modul // npm Modul (default + named import)
const express = require('express'); import express from "express";
import { Router } from "express";
// Built-in // Built-in (mit "node:"-Präfix)
const fs = require('fs'); import { readFileSync } from "node:fs";
const path = require('path'); 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 ```javascript
// Aktuelles Verzeichnis (Node.js) import { fileURLToPath } from "node:url";
console.log(__dirname); // /home/user/project/src import { dirname, join } from "node:path";
console.log(__filename); // /home/user/project/src/app.js
// Pfad joinen const __filename = fileURLToPath(import.meta.url);
const configPath = path.join(__dirname, '..', 'config.json'); 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) # HTTP Server mit Node.js (Built-in)
**ESM** (modern, `"type": "module"` in `package.json`):
```javascript ```javascript
const http = require('http'); import { createServer } from "node:http";
const server = http.createServer((req, res) => { const server = createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' }); res.writeHead(200, { "Content-Type": "text/html" });
res.end('<h1>Hallo Welt!</h1>'); res.end("<h1>Hallo Welt!</h1>");
}); });
server.listen(3000, () => { 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 # fs – Dateien lesen/schreiben
```javascript ```javascript
const fs = require('fs'); import { readFile, readFileSync, writeFile } from "node:fs";
import { readFile as readFileAsync } from "node:fs/promises";
// Async // Promise-API (empfohlen, modern)
fs.readFile('data.json', 'utf8', (err, data) => { const data = await readFileAsync("data.json", "utf8");
console.log(JSON.parse(data));
// Callback-API
readFile("data.json", "utf8", (err, data) => {
if (err) throw err; if (err) throw err;
console.log(JSON.parse(data)); console.log(JSON.parse(data));
}); });
// Sync // Sync (nur für Setup / Scripts)
const content = fs.readFileSync('data.json', 'utf8'); const content = readFileSync("data.json", "utf8");
// Write
fs.writeFile('output.txt', 'Hallo Welt', (err) => {
if (err) throw err;
});
``` ```
--- ---
@@ -206,23 +243,26 @@ npm start → start (direkt)
--- ---
# Node.js Module – exports # Node.js Module – exports (ESM)
```javascript ```javascript
// utils.js // utils.js — named exports
module.exports = { export const add = (a, b) => a + b;
add: (a, b) => a + b, export const greet = (name) => `Hallo ${name}!`;
greet: (name) => `Hallo ${name}!`
};
// Oder einzelne Exporte // utils.js — default export
module.exports.add = (a, b) => a + b; 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`?
slides/dhbw/04_nodejs_advanced.md
+37 -15
View File
@@ -17,7 +17,7 @@ section.invert {
--color-foreground: #fff; --color-foreground: #fff;
} }
section { section {
font-size: 1.7rem; font-size: 1.4rem;
} }
h1 { h1 {
color: #005f8a; color: #005f8a;
@@ -50,7 +50,30 @@ a {
<!-- _header: '' --> <!-- _header: '' -->
<!-- _backgroundColor: #001520 --> <!-- _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 # node.js Module System
```javascript ```javascript
// ES Modules // ES Modules (modern, "type": "module")
import express from 'express'; import express from "express";
import { port } from './src/config/constants.js'; import { port } from "./src/config/constants.js";
import { readFileSync } from "node:fs";
// CommonJS
const fs = require('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 # HTTP Request mit node-fetch
@@ -249,10 +278,3 @@ wss.on('connection', (ws) => {
![bg fit](./assets/demos/test-automation-trophy.png) ![bg fit](./assets/demos/test-automation-trophy.png)
---
# Fragen?
1. Wozu dient `process.on('SIGINT')`?
2. Was macht `app.use(express.json())`?
3. Wie erstellst du einen GET-Endpoint mit Express?