Moviendo a Express 4

Express 4 es un cambio de ruptura de Express 3. Esto significa que una aplicación Express 3 funcionará no si actualiza la versión Express en sus dependencias.

Este artículo cubre:

• Cambios en Express 4.

• Un ejemplo de migrar una aplicación Express 3 a Express 4.

• Upgrading to the Express 4 app generator.

Cambios en Express 4

Hay varios cambios significativos en Express 4:

• Cambios a Express core y middleware. Las dependencias de Conectar y middleware integrados fueron eliminadas, por lo que debe añadir middleware usted mismo.

• Cambia al sistema de enrutamiento.
• Otros cambios varios.

Ver también:

• Nuevas características en 4.x.
• Migración de 3.x a 4.x.

Cambios al sistema Express core y middleware

Express 4 ya no depende de Connect, y elimina todo el Middleware integrado de su núcleo, excepto la función express.static. Esto significa que Express es ahora un entorno web independiente de enrutamiento y middleware. y Las versiones y versiones exprés no se ven afectadas por las actualizaciones de middleware.

Sin middleware integrado, debe agregar explícitamente todo el Middleware que es necesario para ejecutar su aplicación. Simplemente sigue estos pasos:

1. Instala el módulo: npm install --save \<module-name>
2. En tu aplicación, requiere el módulo: require('module-name')
3. Utilice el módulo de acuerdo a su documentación: app.use( ... )

La siguiente tabla muestra Express 3 middleware y sus contrapartes en Express 4.

Aquí está la lista completa de Middleware Express 4.

En la mayoría de los casos, puede reemplazar el middleware de la versión 3 anterior por su contraparte Express 4. Para más detalles, consulte la documentación del módulo en GitHub.

app.use acepta parámetros

En la versión 4 se puede utilizar un parámetro variable para definir la ruta donde se cargan las funciones de middleware, entonces lea el valor del parámetro del gestor de rutas. Por ejemplo:

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

El sistema de enrutamiento

Aplicaciones ahora cargan implícitamente middleware de ruta, así que ya no tienes que preocuparte por del orden en el que el middleware está cargado con respecto a el middleware router.

La forma en que defines las rutas no ha cambiado, pero el sistema de enrutamiento tiene dos características nuevas para ayudar a organizar tus rutas:

• Un nuevo método, app.route(), para crear manejadores de rutas encadenables para una ruta de ruta.
• Una nueva clase, express.Router, para crear manejadores modulares de rutas montables.

método app.route()

El nuevo método app.route() le permite crear controladores de rutas encadenables para una ruta de ruta. Debido a que el camino se especifica en una única ubicación, crear rutas modulares es útil, al igual que reducir redundancia y errores tipográficos. For more information about routes, see Router() documentation.

Aquí hay un ejemplo de manejadores encadenados de rutas que se definen usando la función app.route().

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');
  });

Clase express.Router

La otra característica que ayuda a organizar rutas es una nueva clase, express.Router, que puedes usar para crear manejadores de rutas modulares montables . Una instancia Router es un completo middleware y un sistema de enrutamiento ; por esta razón a menudo se le denomina “mini-app”.

El siguiente ejemplo crea un enrutador como módulo, carga middleware en , define algunas rutas y las monta en una ruta en la aplicación principal.

Por ejemplo, crea un archivo de enrutador llamado birds.js en el directorio de la aplicación, con el siguiente contenido:

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;

Luego, cargue el módulo de enrutador en la aplicación:

var birds = require('./birds');

// ...

app.use('/birds', birds);

La aplicación ahora podrá manejar las solicitudes a las rutas /birds y /birds/about, y llamará al middleware timeLog que es específico de la ruta.

Otros cambios

La siguiente tabla muestra otros cambios pequeños pero importantes en Express 4:

Ejemplo de migración de aplicación

He aquí un ejemplo de migración de una aplicación Express 3 a Express 4. Los archivos de interés son app.js y package.json.

Versión 3 app

app.js

Considere una aplicación Express v.3 con el siguiente archivo app.js:

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

El archivo package.json de la versión 3 que acompaña podría verse algo así:

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

Proceso

Comience el proceso de migración instalando el middleware necesario para la aplicación Express 4 y actualizando Express y Pug a su respectiva versión con el siguiente comando:

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

Hacer los siguientes cambios a app.js:

1. El middleware Express incorporado funciona express.favicon, express.logger, express.methodOverride, express.session, express.bodyParser y express.errorHandler ya no están disponibles en el objeto express. Debes instalar sus alternativas manualmente y cargarlas en la aplicación.

2. Ya no necesitas cargar la función app.router. No es un objeto de aplicación Express 4 válido, por lo que elimina el código app.use(app.router);.

3. Asegúrese de que las funciones de middleware se cargan en el orden correcto - cargar errorHandler después de cargar las rutas de la aplicación.

Versión 4 app

package.json

Ejecutar el comando anterior npm actualizará package.json de la siguiente manera:

{
  "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

Luego, elimina el código inválido, carga el middleware necesario y haz otros cambiosformat@@0 según sea necesario. El archivo app.js se verá así:

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'));
});

Ejecutar la aplicación

El proceso de migración se ha completado, y la aplicación es ahora una aplicación Express 4. Para confirmar, inicia la aplicación usando el siguiente comando:

$ node .

Cargar http://localhost:3000 y ver la página de inicio mostrada por Express 4.

Actualización al generador de aplicaciones Express 4

La herramienta de línea de comandos para generar una aplicación Express sigue siendo express, pero para actualizar a la nueva versión, debe desinstalar el generador de aplicaciones Express 3 y luego instalar el nuevo generador express-generator.

Instalando

Si ya tiene instalado el generador de aplicaciones Express 3 en su sistema, debe desinstalarlo:

$ npm uninstall -g express

Dependiendo de cómo estén configurados tus privilegios de archivo y directorio, puede que necesites ejecutar este comando con sudo.

Ahora instale el nuevo generador:

$ npm install -g express-generator

Dependiendo de cómo estén configurados tus privilegios de archivo y directorio, puede que necesites ejecutar este comando con sudo.

Ahora el comando express en su sistema se actualiza al generador Express 4.

Cambios al generador de aplicaciones

Las opciones de comando y uso siguen siendo en gran medida las mismas, con las siguientes excepciones:

• Se ha eliminado la opción --sessions.
• Se ha eliminado la opción --jshtml.
• Se añadió la opción --hogan para soportar Hogan.js.

Ejemplo

Ejecutar el siguiente comando para crear una aplicación Express 4:

$ express app4

Si observas el contenido del archivo app4/app.js, notarás que todas las funciones de middleware (excepto express. tatic) que son requeridos para la aplicación se cargan como módulos independientes, y el middleware router ya no se carga explícitamente en la aplicación.

También notará que el archivo app.js es ahora un Nodo. , en contraste con la aplicación independiente generada por el generador anterior.

Después de instalar las dependencias, inicie la aplicación usando el siguiente comando:

$ npm start

Si miras el script npm start en el paquete. archivo son, notarás que el comando real que inicia la aplicación es node . bin/www, que solía ser node app.js en Express 3.

Porque el archivo app.js que fue generado por el generador Express 4 es ahora un Nodo. s módulo, ya no puede iniciarse independientemente como una aplicación (a menos que modifiques el código). El módulo debe cargarse en un archivo Node.js y debe iniciarse a través del archivo Node.js. El archivo Node.js es ./bin/www en este caso.

Ni el directorio bin ni el archivo sin extensión www es obligatorio para crear una aplicación Express o iniciar la aplicación. Son solo sugerencias hechas por el generador, así que siéntete libre de modificarlas para adaptarse a tus necesidades.

Para deshacerse del directorio www y mantener las cosas de la forma “Express 3”, borrar la línea que dice module. xports = app; al final del archivo app.js, luego pega el siguiente código en su lugar:

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), () => {
  debug('Express server listening on port ' + server.address().port);
});

Asegúrese de cargar el módulo debug en la parte superior del archivo app.js usando el siguiente código:

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

A continuación, cambia "start": "node ./bin/www" en el archivo package.json a "start": "node app.js".

Ahora ha movido la funcionalidad de ./bin/www de vuelta a app.js. Este cambio no es recomendable, pero el ejercicio te ayuda a entender cómo el . bin/www archivo funciona, y por qué el archivo app.js ya no comienza por sí mismo.