How many of us still use the old ES syntax in our NodeJS apps?
const express = require('express');
const app = express()
app.use(express.static('public'));
app.get('/',function (req,res) {
res.send('ES what?');
})
app.listen(3000, function () {
console.log('App listening on port 3000!')
})
I bet most of us do, and unfortunately I am equally guilty of this! The reason we continue to use this syntax with node is because most templates and sample codes are based on this. But since the release of Node 14.x, ES modules is officially supported and stable. But one shouldn't migrate just because its the thing to do. Migrations often involved weighing the pros and cons. After a little research and experimentation, I have concluded that there are actually three big advantages to using ES6's import
over require
:
-
import
helps in selectively loading the pieces of code which are required -
import
also helps in saving memory loaded onto the app -
require()
's loading is synchronous whileimport
's loading can be asynchronous; this provides large apps with a performance edge.
So the natural question is what would it take to use an ES6 syntax in your node project?
Let's get started!
Setup package.json
One thing to note, Node.js doesn’t support ES6 import directly. If we try to use the keyword import
for importing modules in Node.js, it will undoubtedly throw an error. For example, if we try to import express module, Node.js will error as follows:
In order to enable Node support for ES modules we need to tweak the package.json file. In the package.json
file add "type": "module"
to the root of the file as such:
//package.json
{
"name": "index",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC"
"dependencies": {
"express": "~4.16.1",
}
}
Then run the following command to update changes to package.json
npm i
Update your app's code to ES6 syntax
Once we have updated our package
file we have to make the relevant changes to our app's code as follows:
import express from 'express';
const app = express();
app.get('/',(req,res) => {
res.send('ES6 is the Node way to go');
})
app.listen(3000,() => {
console.log(`App listening on port 3000!`);
})
Run your app and it should work with the updated ES syntax!
I recently update my demo app Random Cat Facts to use the new syntax and would recommend checking out the update ES6 commit diff for a real world example of this migration.
Thank you for following along and be sure to look out for my next post!
==== Follow me on Social Media(@mrinasugosh
) ====
Dev.to: @mrinasugosh
Github: @mrinasugosh
Twitter: @mrinasugosh
LinkedIn: @mrinasugosh
Top comments (18)
TS way is the best. Use sucrase as an alternative for nodemon and ts-node
Check how fast sucrase is
Typescript or not, import the the way, it doesn't matter if you use typescript or not.
Typescript is a dialect for development, not for runtime.
I also don't build my node modules back to the old way, my modules on npm have just import/export without a build step.
but, typescript guarantees type safety and rich intellisense, if you dont like typescript check JSDoc. JSDoc provides typings using regular JS comments so, no need for build steps.
examples
it enhances intellisense of your code editor.
Visit for more Info
JSDoc is indeed very useful for development, it's a standard for me to use it, but it's also not for runtime checking.
I made e.g. npmjs.com/package/@hckrnews/objects for type checking, but there are more packages to guarantee if the data is valid.
Typescript has some nice features, but for me there are also reasons I don't use it for node.js, and I found ways to write clean code that also guarantee that the data is valid.
Clean readable code, strict linting and good tests are very important for me.
For some it can be with typescript, but typescript don't guarantee that your code is good.
Use it if you like it, but it's not the holy grail for good code.
@w3nl
Agreed import is the way to go TS/JS!
Out of curiousity, what are the steps you use to import/export without a build step? I have been reading a bit of the docs and found that the two ways. Certainly curious to know your approach :)
nodejs.org/docs/latest-v14.x/api/e...
I use the type field in the package.json
Than you say that es modules is your default, and if you need common js, you have to change that file extension to cjs.
(e.g. if some old package need a config file in common js format)
The greatest benefit for me is debugging information, what is going on in the dependencies.
(Packages I made and use in my projects)
Interesting I will surely check out sucrase! I was working with esbuild earlier and was impressed by its performance compared to Babel or Webpack.
at first I was surprised too, after checking sucrase performance
Yeah this is what I need. I was a hobbyist node.js enthusiast until about 2014. I'm trying to hop back in now but like you said, all the tutorials and docs are outdated! A lot of style guides are still using var all over the place. Thanks. I'm very much the type to train my habits from day 1 and besides this article haven't really found a baseline or the way forward with a Node and ES6 style guide.
@bitfed Yes, it was certainly hard to find a guide to this with a straightforward solution but I am so glad this was helpful!
I hope to see more! There still isn't an ES6 node style guide.
very useful for node js development
Wow this is awesome. I didnt know that node has native support for ES modules and its so simple to implement. Thanks a ton for sharing this.
Of course! Glad you found it useful 🙃
Very good. Thanks for sharing
Glad you found it resourceful!
can it be combined? say, i got npm package that uses module.export. can it be imported by using import statement?
Yes it should work with module.export.
Just one thing to note:
Many people consider module.exports = ... to be equivalent to export default main; That's not quite true though, or at least not how Babel does it.
ES6 default exports are actually also named exports, except that default is a "reserved" name and there is special syntax support for it as a heads up