Start Using ES Modules Now

what's going on I'm back the year is 2023 and it is time to get rid of common JS and get with esm and in this video I'll show you how to convert your project and you'll see that it's really not a big deal if you're already a node.js developer then this probably doesn't look too foreign to you this is a typical common JS project it uses the required statements just like you've seen for the entire time you've been using node.js as you probably know already top level async and await doesn't work so you have to do some crazy self-executing function with a async Anonymous function in it and then you can use the weight inside that and that will work just fine for files that export functions or variables this is what you would do module.exports and again this is something that you've seen a million times probably already unfortunately though this is very old and this is not the way forward and there's a couple of good reasons why you want to do this now the first and less important reason is this is the modern way to write node.js and by doing it the esm style you're going to be doing it the same as if you're working on the front end because things like webpack and other bundlers you are already using saying es modules in that the second and perhaps way more important reason is that Library authors are starting to make their libraries esm and the reason this is a problem is because common JS cannot require an esm module however esm modules can require things that are common JS so by not converting your project to esm you're going to run into a situation where you go to upgrade a module that you've been using a lot to a newest version and it's just simply not going to work because it's it's an es module and you're still using common JS there is still technically a way to require an es module from common JS but it is kind of ugly and I don't think you want to do it so let's just quickly review the anatomy of a common JS app it contains a package.json that has absolutely nothing it's just a description you have any description it could just be an empty package.json or no package.json at all you can just run it directly your index.js or whatever you want to call it will have a bunch of required statements this requires a separate file which we'll look at and then all the code that you want the file that you require we'll have more things it requires and then it'll module.exports the function that you want to export and then that function can be used from the other file util.open and when you go to run it it will function much like you'd expect it to work okay so let's work on converting this common JS project into a es module all right I've copied all my files over to my esm directory so I listed out the steps you need to take to convert from common JS to esm so the very first thing you have to do is add type equals module to your package.json so we'll do that now now the moment you do this all hell is going to break loose in your project if you come over here and run the index.js again you can see that it's going to break pretty hard and the Aero thrown is pretty straightforward require is not defined in es module scope because that function doesn't exist if it's an as module so let's just go line by line to fix our code so cons FS equals requires FS can be replaced with import FS from fs and then you can do the same thing for crypto and then just delete our old two lines so those two I just converted were imports from node built-ins if I want to do imports from a file that I made like util.js it's kind of the same import util from dot slash you do relative Imports util.js and then delete our old line now here's something super awesome because es modules are asynchronously loaded you can think of the entire file as wrapped in async operation which means we can drop this and top level away it works perfectly now let's also fix the import line and util.js import FS from FS promises and delete our line so we've done the Second Step here change out calls to require with import so now we move on to change out module.exports to export default now export is a complicated keyword you can do a lot with it but I'm trying to give you one-to-one analogs from export to something else so all you have to do is select all module that exports equals and change it to export default this will make it work just like it used to now this might not be optimal you might want you might want to change it up and change how it actually exports but to have really close one-to-one analogs between the two this is going to be the best we already did this step but we can remove all top level self executing functions that was that async Anonymous function with a weight inside it we got rid of that and the last step is to remove any use strict that you have from anywhere and that's because es modules are by default in strict mode now let's go back here and run our project again and you can see that it works great type module description I am an esm app there is one important caveat to all this and and it's the above steps that we just went over only gets you ninety percent of the way there are a couple things that are going to be broken beyond what I put here one thing is using underscore underscore name or underscore underscore file name those do not exist in esm however a quick 10 second Google search will give you an equivalent for file name and their name using the new esm stuff one last thing the minimum node version that you're going to need to actually do this is node 12. however using the newest is preferred or at least 16 16 is pretty modern but the nice thing about node.js is using the newest version for 99 of projects doesn't really break anything so you should be able to just upgrades the newest and be okay for the most part anyway that's gonna be it for the video don't wait another day to do this it's so important especially if you're doing a new project just do it from the get-go as an es module project I've already started converting all my projects and it really wasn't too bad and I'm really glad I did it if you have any questions or comments about anything saw in this video let me know Below in the comments also I'm happy to be back and I hope to see you on a future video take care

Channel: Engineer Man

Views: 25,494

Keywords: node.js, node.js esm, ecmascript, ecmascript modules, esm, es modules

Id: lMWUqWKEGgQ

Length: 5min 47sec (347 seconds)

Published: Fri Jun 09 2023