Using ES6/ES2015 in a Node.JS and Express

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.”

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?

Written By StevenLacks

  • Jamison Hyman

    Great tutorial! I think you missed one thing. Just change to the following:

    Just use “npm install –save-dev babel”

    • Nice catch, I need to copy and paste instead of typing commands. Thank you for reading and commenting.

      Do you think I should write a sequel to this, for more complex builds and apps with babel?

      • Jamison Hyman

        All the cool kids are doing React but there’s tons out there already.

      • Tinny Kalra

        Yes i think so, that sequel would be very helpful for newbees.

    • Just FYI
      In Babel 6 it should be: npm install babel-cli –save-dev in stead of babel

      Info from babel:
      You have mistakenly installed the babel package, which is a no-op in Babel 6.

      Babel’s CLI commands have been moved from the babel package to the babel-cli package.

      npm uninstall babel
      npm install babel-cli

      See http://babeljs.io/docs/usage/cli/ for setup instructions.

  • Thanks for the tutorial! Nice.

  • D Durham

    All the cool kids – or at least some of them – also don’t really ‘get’ all this and are mimicking drones. I see examples every day where there are 2 or 3 ‘imports’ (E2015) at the top of a file and then a require (ES5) for Express mixed in the same file. That tells me the person doing it like copied or mimicked pieces from different places without a full understanding of the syntax differences and or reasoning behind why we do these things.

    While there is nothing technically ‘wrong’ about that, it potentially confuses new developers and is teaching them how not to do things. So I think something consistent like this is spot on given all the things we have to consider today. Try to find another example out there that uses something like Express that’s been around a while and tries to use ES2015 that get it even close to right without the ‘var’ or ‘require’ keywords in there somewhere.

    This is a great starter example!

  • Tom Yitav

    Great, thanks! I have created a small project that I often use as starter for my express apps, using Mongoose… If anyone is interested, this is the link to the github repository:
    https://github.com/tomyitav/express-es6-starter
    Hope it helps!