ECMAScript Modules In Node

Key Takeaways

[Music] you guys if you're interested in no js' I would suggest taking my udemy nodejs dev to development course where we build to real applications and deploy them to Heroku I also have a bunch of other courses that are available including my latest myrn stack course if you're interested head to Traverse e Mediacom and check them out hey what's up guys so after my video called what's new what's new and no 10 that I did about two weeks ago I've had a lot of people asked me to do a video on how to use the ES module syntax or the ESM syntax or equi script modules whatever you want to call it and if you don't know what I mean it's the import and export way of creating and bringing in modules which if you've used react or angular or view you you've probably used this syntax a lot because they use webpack and babel to basically compile it down now no js' has its own system called commonjs which is that requires syntax that we use but they're really working hard on trying to really incorporate es modules at this point in note n we can use the syntax but there's a few stipulations one is that it has to be under an experimental flag also you have to use a dot MJS extension and there's a couple other things as well if you really want to get into it you can look at the documentation there's a bunch of good articles out there as well if I remember I'll link some of them in the description but in this video I basically just want to show you how to implement it all right now there's other ways of using import and export in node as well one is Babel which I've used for quite a while now when I want when I want to use that syntax and if you guys want me to do a video showing you how to set up Babel with node then let me know I can do that it's it'll be a pretty simple video you also have the standard thing slash ESM module which is a production-ready 0 dependency es module loader and this this has been around this was this is for node 6 plus actually and it's pretty easy to implement but if you want to do it natively without having to install anything that's what we're gonna do in this video so let's head over to vs code and I just have a blank folder called no DSM and we're gonna just go ahead and generate a package.json file with NPM and NIT and I'm just gonna add the - why flag and that makes it so I don't have to answer any questions or anything and this is what it should look like and let's clear this up now I'm gonna just use Express to show you how we can import it using ESM and also just create a basic server with with a route so let's do NPM install Express and now what we'll do is create a new file here now since I'm going to be using the import syntax we have to give it I'll do index we have to give it an MJS extension okay which I know looks a little weird but it's it's just what we have to do if you want to use this syntax at this point so in here I'm gonna usually what we would do is do Const Express and set this to require Express which is common j/s syntax if we try to use this within an int within an MJS file it's actually not going to work and that's the reason for the mixed file extensions the j/s extension is for the common j s and then MJ s is for es m okay so let's get rid of this and let's do import Express from Express okay and then everything else will obviously be the same we're just gonna initialize an app variable with Express I'll create a simple route so let's say slash and put our request/response and let's just do a exits do a res dot send so we're just going to print out to the browser hello and then we'll create a port of five thousand let's do app dot listen and we want to listen on that port and then just put a callback in here I'll just use an arrow and we'll say console dot log and let's put some back ticks in here and say server started on ports and then we'll put in our variable port okay so let's go ahead and save that now let's go let's clear this up now if I just do node index like you would if you were using common j/s and a dot j s and tax it's it's not going to find the index file because it's looking for index dot g is now even if i did clear this up even if I did node index dot MJS it's still not going to work and you can see right here basically doesn't know what this is in order to use this import we have to use the experimental flag so what we need to do is we need to run node - - experimental - modules and then index dot MJS if we run that everything works you can see server started it's also going to give us this notification telling us that the es module loader is experimental all right so to test this out let's go to Chrome and let's open up localhost port 5000 and there we go we get hello so we're now able to use that syntax I want to go back to vs code now if you want to create your own modules you can do that so let's create a folder I'm just going to call this hello it's not going to be anything special I just want to show you how to use this and inside hello what create let's create a file we'll just call this index dot MJS as well now I'm not importing anything into this file but I am exporting so I do need to use the MJS extension so what I'm gonna do here is something just very very simple I'm gonna say export Const welcome and we'll set that to a string and we'll just say welcome to node ESM okay so we're exporting it normally with common j/s what we would do is module dot exports okay and any of you guys that have dealt with know before know that but now we're just using the ESM export so now if we go back to our our index MJS maybe they should have called this something different but whatever that's fine if we want to bring this in what we have to do is just import I want to put so we didn't explore it default so we're going to put some curly braces around this and we want the welcome variable and that's gonna be from and we can just do dot slash hello it's gonna since we called it index it's going to know automatically that that's what we're loading and then let's just replace hello this right here the string with welcome now if I save this and I go to Chrome and I reload it's not going to change because obviously we're not using node Mon or anything like that so we have to restart the server now if you want to use node lon that's absolutely fine you can still do that so let's actually install node Mon real quick whoops am i doing ctrl C so say NPM install - upper case D which will install it as a dev dependency and node Mon okay and then let's go to our package dot jason once that once you see that show up we're going to go ahead and add a script here i'm just gonna call it start i'll just do so we can do npm start and let's do node mon and then we still need to do the experimental flag experimental modules and then index MJS all right so now let's go down here and let's run NPM start and now node Mon will run and it will also run the flag and whilst will be we should be able to do this so let's go to our browser when I close it and let's reload and there we go welcome to node ESM so that this string here is coming from our custom module that we created right here so if we wanted to export something else we could do that as well so let's say if we wanted to do like a function we could say exports let's do function add something very simple and add will take in what am i doing here ad will take in a and B and then we'll just return a plus B and we'll save that and then if we go back to our main index file we can bring that in as well so we'll say add and instead of actually I'm just going to comment let's comment this out here actually I'll copy it too so instead of doing welcome let's run our function so we'll do add and we'll do five and five now if we do residents and with the number it's gonna give us an error and tell us to do send state it's gonna think we're sending a status so I'm just going to add on to this dot two string which is just a JavaScript method to turn it to a string so let's save that and see if that works so everything went okay down here so let's go back to Chrome and reload and we get ten okay so we exported that add function from our custom module file and used it now if we wanted to explore something as default we could do that as well so what I'll do is just comment this out and let's do Const welcome equals welcome to no DSM and then I'll go down here and say export default welcome and then in our main index file I'm gonna comment this out and let's do import and now we don't need the curly braces we can just say welcome from dot slash hello and then let's just get rid of actually we can comment this so and let's uncomment this okay because we're still using the welcome variable so we'll save that and let's go back to Chrome and reload and we get welcome to node ESM okay so that's pretty much it guys you can bring in whatever you want now with import you can export just make sure you use the dot MJS and make sure that you use the experimental modules flag as well now if you're not into using the flag or using MJS and you would rather use babel to compile your JavaScript and be able to use import/export let me know when I can do a video showing you how to set it up I actually have like a babel starter pack that I usually use when when I want to use battle with node but that's gonna be it for this video guys thank you for watching and please leave a like if you liked it and I will see you in the next video