Wechsel zu Express 4

Überblick

Express 4 bietet grundlegende Veränderungen im Vergleich zu Express 3. Das bedeutet, dass eine Express 3-Anwendung nicht funktioniert, wenn Sie die Express-Version in ihren Abhängigkeiten aktualisieren.

In diesem Beitrag werden folgende Themen behandelt:

• Änderungen in Express 4
• Beispiel für die Migration einer Express 3-Anwendung auf Express 4
• Upgrade auf den Express 4 App Generator

Änderungen in Express 4

In Express 4 wurden einige signifikante Änderungen vorgenommen:

• Changes to Express core and middleware system. The dependencies on Connect and built-in middleware were removed, so you must add middleware yourself.
• Änderungen am Weiterleitungssystem (Routingsystem).
• Weitere Änderungen.

Siehe hierzu auch:

• Neue Features/Funktionen in 4.x.
• Migration von 3.x auf 4.x.

Änderungen am Express-Core- und Middlewaresystem

In Express 4 bestehen keine Abhängigkeiten mehr zu Connect. Alle integrierten Middlewarefunktionen werden aus dem Core entfernt. Ausgenommen hiervon ist die Funktion express.static. Das bedeutet, dass Express nun ein unabhängiges Routing- und Middleware-Web-Framework ist und Express-Versionierung und -Releases von Middleware-Updates nicht betroffen sind.

Ohne integrierte Middleware müssen Sie explizit alle Middlewarefunktionen hinzufügen, die für die Ausführung Ihrer Anwendung erforderlich sind. Befolgen Sie einfach diese Schritte:

1. Installieren des Moduls: npm install --save <modulname>
2. Anfordern des Moduls in Ihrer Anwendung: require('modulname')
3. Verwendung des Moduls gemäß Dokumentation: app.use( ... )

In der folgenden Tabelle sind Express 3-Middlewarefunktionen und deren Entsprechungen in Express 4 aufgelistet.

Hier finden Sie die komplette Liste der Express 4-Middleware.

In den meisten Fällen können Sie einfach nur die Middleware der alten Version 3 durch deren Entsprechung in Express 4 ersetzen. Details hierzu finden Sie in der modulspezifischen Dokumentation in GitHub.

app.use akzeptiert Parameter.

In Version 4 können Sie über einen Variablenparameter den Pfad definieren, in den Middlewarefunktionen geladen werden. Dann können Sie den Wert des Parameters aus dem Routenhandler laden. Beispiel:

app.use('/book/:id', (req, res, next) => {
 console.log('ID:', req.params.id)
 next()
})

Das Routingsystem

Anwendungen laden nun implizit Routing-Middleware. Sie müssen sich also keine Gedanken mehr über die Reihenfolge machen, in der die Middleware in Bezug auf die router-Middleware geladen wird.

Das Routingsystem verfügt jedoch über zwei neue Funktionen, die beim Organisieren Ihrer Weiterleitungen helfen:

• Die neue Methode app.route() zum Erstellen verkettbarer Routenhandler für einen Weiterleitungspfad
• Die neue Klasse express.Router zum Erstellen modular einbindbarer Routenhandler

Die Methode app.route()

Die neue Methode app.route() hilft beim Erstellen verkettbarer Routenhandler für einen Weiterleitungspfad. Da der Pfad an einer einzelnen Position angegeben wird, ist das Erstellen modularer Weiterleitungen hilfreich, da Redundanzen und Schreibfehler reduziert werden. Weitere Informationen zu Weiterleitungen finden Sie in der Dokumentation zu Router().

Dies ist ein Beispiel für verkettete Routenhandler, die mit der Funktion app.route() definiert werden.

app.route('/book')
 .get((req, res) => {
 res.send('Get a random book')
 })
 .post((req, res) => {
 res.send('Add a book')
 })
 .put((req, res) => {
 res.send('Update the book')
 })

Die Klasse express.Router

Eine weitere Funktion, die beim Organisieren von Weiterleitungen hilft, ist die neue Klasse express.Router. Über diese Klasse können Sie modular einbindbare Routenhandler erstellen. Eine Router-Instanz ist ein vollständiges Middleware- und Routingsystem. Aus diesem Grund wird diese Instanz oft auch als "Mini-App" bezeichnet.

Im folgenden Beispiel wird ein Router als Modul erstellt, Middleware in das Modul geladen, es werden Weiterleitungen definiert und das Modul letztendlich in einen Pfad in der Hauptanwendung eingebunden.

Beispiel: Erstellen Sie eine Routerdatei namens birds.js mit dem folgenden Inhalt im Anwendungsverzeichnis:

var express = require('express')
var router = express.Router()
// middleware specific to this router
router.use((req, res, next) => {
 console.log('Time: ', Date.now())
 next()
})
// define the home page route
router.get('/', (req, res) => {
 res.send('Birds home page')
})
// define the about route
router.get('/about', (req, res) => {
 res.send('About birds')
})
module.exports = router

Laden Sie dann das Routermodul in die Anwendung:

var birds = require('./birds')
// ...
app.use('/birds', birds)

Die Anwendung kann nun Anforderungen an die Pfade /birds und /birds/about bearbeiten und ruft die Middleware timeLog auf, die speziell für diese Weiterleitung bestimmt ist.

Weitere Änderungen

In der folgenden Tabelle sind andere kleinere, aber trotzdem wichtige Änderungen in Express 4 aufgeführt:

Beispiel für eine Anwendungsmigration

Dies ist ein Beispiel für die Migration einer Express 3-Anwendung auf Express 4. Die dabei interessanten Dateien sind app.js und package.json.

Anwendung der Version 3

app.js

Es wird eine Express v.3-Anwendung mit der folgenden Datei app.js angenommen:

var express = require('express')
var routes = require('./routes')
var user = require('./routes/user')
var http = require('http')
var path = require('path')
var app = express()
// all environments
app.set('port', process.env.PORT || 3000)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')
app.use(express.favicon())
app.use(express.logger('dev'))
app.use(express.methodOverride())
app.use(express.session({ secret: 'your secret here' }))
app.use(express.bodyParser())
app.use(app.router)
app.use(express.static(path.join(__dirname, 'public')))
// development only
if (app.get('env') === 'development') {
 app.use(express.errorHandler())
}
app.get('/', routes.index)
app.get('/users', user.list)
http.createServer(app).listen(app.get('port'), () => {
 console.log('Express server listening on port ' + app.get('port'))
})

package.json

Die zugehörige package.json-Datei der Version 3 sieht in etwa wie folgt aus:

{"name":"application-name","version":"0.0.1","private":true,"scripts":{"start":"node app.js"},"dependencies":{"express":"3.12.0","pug":"*"}}

Prozess

Beginnen Sie den Migrationsprozess mit der Installation der erforderlichen Middleware für die Express 4-Anwendung und der Aktualisierung von Express und Pug auf die aktuellen Versionen. Verwenden Sie hierzu den folgenden Befehl:

$ npm install serve-favicon morgan method-override express-session body-parser multer errorhandler express@latest pug@latest --save

Nehmen Sie an app.js die folgenden Änderungen vor:

1. Die integrierten Express-Middlewarefunktionen express.favicon, express.logger, express.methodOverride, express.session, express.bodyParser und express.errorHandler sind im Objekt express nicht mehr verfügbar. Sie müssen deren Alternativen manuell installieren und in die Anwendung laden.

2. Sie müssen die Funktion app.router nicht mehr laden. Sie ist kein gültiges Express 4-Anwendungsobjekt. Entfernen Sie also den Code app.use(app.router);.

3. Stellen Sie sicher, dass die Middlewarefunktionen in der richtigen Reihenfolge geladen werden – laden Sie errorHandler nach dem Laden der Anwendungsweiterleitungen.

Anwendung der Version 4

package.json

Durch Ausführung des Befehls npm wird package.json wie folgt aktualisiert:

{"name":"application-name","version":"0.0.1","private":true,"scripts":{"start":"node app.js"},"dependencies":{"body-parser":"^1.5.2","errorhandler":"^1.1.1","express":"^4.8.0","express-session":"^1.7.2","pug":"^2.0.0","method-override":"^2.1.2","morgan":"^1.2.2","multer":"^0.1.3","serve-favicon":"^2.0.1"}}

app.js

Entfernen Sie dann ungültigen Code, laden Sie die erforderliche Middleware und nehmen Sie andere Änderungen nach Bedarf vor. Die Datei app.js sieht dann wie folgt aus:

var http = require('http')
var express = require('express')
var routes = require('./routes')
var user = require('./routes/user')
var path = require('path')
var favicon = require('serve-favicon')
var logger = require('morgan')
var methodOverride = require('method-override')
var session = require('express-session')
var bodyParser = require('body-parser')
var multer = require('multer')
var errorHandler = require('errorhandler')
var app = express()
// all environments
app.set('port', process.env.PORT || 3000)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')
app.use(favicon(path.join(__dirname, '/public/favicon.ico')))
app.use(logger('dev'))
app.use(methodOverride())
app.use(session({
 resave: true,
 saveUninitialized: true,
 secret: 'uwotm8'
}))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(multer())
app.use(express.static(path.join(__dirname, 'public')))
app.get('/', routes.index)
app.get('/users', user.list)
// error handling middleware should be loaded after the loading the routes
if (app.get('env') === 'development') {
 app.use(errorHandler())
}
var server = http.createServer(app)
server.listen(app.get('port'), () => {
 console.log('Express server listening on port ' + app.get('port'))
})

app.listen(app.get('port'), () => {
 console.log('Express server listening on port ' + app.get('port'))
})

Anwendung ausführen

Der Migrationsprozess ist abgeschlossen und die Anwendung ist nun eine Express 4-Anwendung. Zum Bestätigen starten Sie die Anwendung mit dem folgenden Befehl:

$ node .

Laden Sie http://localhost:3000 und sehen Sie, wie die Homepage von Express 4 wiedergegeben wird.

Upgrade auf den Express 4 App Generator

Das Befehlszeilentool zum Generieren einer Express-Anwendung ist nach wie vor express. Für ein Upgrade auf die neue Version müssen Sie jedoch den Express 3 App Generator deinstallieren und dann den neuen Generator express-generator installieren.

Installation

Wenn der Express 3 App Generator bereits auf Ihrem System installiert ist, müssen Sie diesen deinstallieren:

$ npm uninstall -g express

Abhängig davon, wie Ihre Datei- und Verzeichnissberechtigungen konfiguriert sind, müssen Sie diesen Befehl möglicherweise mit sudo ausführen.

Installieren Sie nun den neuen Generator:

$ npm install -g express-generator

Abhängig davon, wie Ihre Datei- und Verzeichnissberechtigungen konfiguriert sind, müssen Sie diesen Befehl möglicherweise mit sudo ausführen.

Nun wird der Befehl express auf Ihrem System auf den Express 4 App Generator aktualisiert.

Änderungen am App Generator

Befehlsoptionen und -nutzung bleiben größtenteils unverändert. Es gelten jedoch folgende Ausnahmen:

• Option --sessions wurde entfernt.
• Option --jshtml wurde entfernt.
• Option --hogan wurde hinzugefügt, um Hogan.js zu unterstützen.

Beispiel

Führen Sie den folgenden Befehl aus, um eine Express 4-Anwendung zu erstellen:

$ express app4

Wenn Sie sich den Inhalt der Datei app4/app.js ansehen, werden Sie feststellen, dass alle Middlewarefunktionen (außer express.static), die für die Anwendung erforderlich sind, als unabhängige Module geladen werden und die Middleware router nicht mehr explizit in die Anwendung geladen wird.

Sie werden auch feststellen, dass die Datei app.js nun ein Node.js-Modul ist – im Gegensatz zur eigenständigen Anwendung, die vom bisherigen Generator generiert wurde.

Starten Sie nach der Installation der Abhängigkeiten die Anwendung mit dem folgenden Befehl:

$ npm start

Wenn Sie sich das npm-Startscript in der Datei package.json näher ansehen, werden Sie feststellen, dass der eigentliche Befehl, der die Anwendung startet, node ./bin/www heißt. Dieser Befehl lautete in Express 3 node app.js.

Da die Datei app.js, die vom Express 4 Generator erstellt wurde, nun ein Node.js-Modul ist, kann dieses nicht mehr wie bisher unabhängig als Anwendung gestartet werden (es sei denn, Sie ändern den Code). Das Modul muss in eine Node.js-Datei geladen und über die Node.js-Datei gestartet werden. Die Node.js-Datei ist in diesem Fall ./bin/www.

Weder das Verzeichnis bin noch die erweiterungslose Datei www ist für das Erstellen einer Express-Anwendung oder das Starten der Anwendung zwingend erforderlich. Dies sind lediglich Vorschläge des Generators. Sie können diese also je nach Ihren Anforderungen ändern.

Um das Verzeichnis www zu löschen und alles im "Express 3-Stil" zu belassen, löschen Sie die Zeile mit dem Eintrag module.exports = app; am Ende der Datei app.js. Fügen Sie dann stattdessen den folgenden Code an derselben Position ein:

app.set('port', process.env.PORT || 3000)
var server = app.listen(app.get('port'), () => {
 debug('Express server listening on port ' + server.address().port)
})

Stellen Sie sicher, dass Sie das Modul debug am Anfang der Datei app.js laden. Verwenden Sie dazu den folgenden Code:

var debug = require('debug')('app4')

Ändern Sie als Nächstes "start": "node ./bin/www" in der Datei package.json in "start": "node app.js".

Sie haben nun die Funktionalität von ./bin/www wieder in app.js verschoben. Diese Änderung wird nicht empfohlen. Die Übung hat Ihnen jedoch geholfen, zu verstehen, wie die Datei ./bin/www funktioniert und warum die Datei app.js nicht mehr automatisch gestartet wird.