These are some very minimal changes to the standard express.js generated app.js file. It looks nice, “=>” syntax is getting easier to read the more I use and get used to it. Note: I took out a lot of unrelated code to isolate the topic of the blog. This example is for getting a development, learning environment ready to use Babel.js with Express on the back and front ends.
How’d I do it?
Using Babel’s “babel-node” cli tool, its compiling in real time in the development env. For production, do not use babel-node, you’ll want to compile with Babel.js then run with node. Just use “npm install -g babel-cli” and babel-node is already there and built in.
I also included eslint for good measure. Make sure to “npm install –save-dev babel-eslint” and set the parser to “babel-eslint.”
{ | |
"parser": "babel-eslint", | |
"env": { | |
"node": true, | |
"es6": true | |
}, | |
"rules":{ | |
"vars-on-top": 2, | |
"no-undef": 2 | |
} | |
} |
"use strict"; | |
import express from 'express'; | |
import path from 'path'; | |
import favicon from 'serve-favicon'; | |
import logger from 'morgan'; | |
import cookieParser from 'cookie-parser'; | |
import bodyParser from 'body-parser'; | |
import routes from './routes/index'; | |
import users from './routes/users' | |
//using let | |
let app = express(); | |
app.set('views', path.join(__dirname, 'views')); | |
app.set('view engine', 'jade'); | |
app.use(logger('dev')); | |
app.use(bodyParser.json()); | |
app.use(bodyParser.urlencoded({ extended: false })); | |
app.use(cookieParser()); | |
app.use(express.static(path.join(__dirname, 'public'))); | |
app.use('/', routes); | |
app.use('/users', users); | |
// using arrow syntax | |
app.use((req, res, next) => { | |
let err = new Error('Not Found'); | |
err.status = 404; | |
next(err); | |
}); | |
if (app.get('env') === 'development') { | |
app.use((err, req, res, next) => { | |
res.status(err.status || 500); | |
res.render('error', { | |
message: err.message, | |
error: err | |
}); | |
}); | |
} | |
app.use((err, req, res, next) => { | |
res.status(err.status || 500); | |
res.render('error', { | |
message: err.message, | |
error: {} | |
}); | |
}); | |
module.exports = app; |
{ | |
"name": "es6-express", | |
"version": "0.0.0", | |
"description": "ES6/ES2015 Express Example", | |
"repository": "n/a", | |
"license": "MIT", | |
"author": "Steven", | |
"scripts": { | |
"lint": "eslint app.js", | |
"start": "babel-node ./bin/www", | |
"auto-start": "nodemon –exec \"npm run lint && npm start\" –ignore public/js" | |
}, | |
"dependencies": { | |
"body-parser": "~1.13.2", | |
"cookie-parser": "~1.3.5", | |
"debug": "~2.2.0", | |
"express": "~4.13.1", | |
"jade": "~1.11.0", | |
"morgan": "~1.6.1", | |
"serve-favicon": "~2.3.0" | |
}, | |
"devDependencies": { | |
"babel": "^5.8.21", | |
"babel-eslint": "^4.0.10", | |
"eslint": "^1.1.0", | |
"nodemon": "^1.4.1" | |
} | |
} |
What else do you suggest that can I do to the app.js to take advantage ES6 features, without straying too far from the default?