Using JavaScript Modules

alright guys today I want to talk about JavaScript modules and specifically in the browser environment not in the node.js environment so what I want to do is just give you guys a basic introduction into how to break your JavaScript into multiple modules and then be able to import those modules into your main script file that you reference inside of your index.html file so that you can have a really nice clean componentized program this is gonna be super helpful too because in my next tutorial which I'm not going to exactly say what it is because I want it to be a bit of a surprise but you guys are absolutely going to love it we're going to be using modules in the web browser so this is going to be kind of like a precursor to that to make sure that you guys have a good understanding of that before we do this amazing tutorial that you guys are gonna be super excited about alright so I'm gonna be using vs code for this tutorial if you're not using vs code that's perfectly fine but I'm gonna be using shortcuts that are specific to vs code so just keep that in mind I'm also going to be using a server that comes as an extension with vs code but I'll also show you how to do it using just no js' in case you seriously don't want to use vs code which is again perfectly fine let's go ahead and start like we're gonna be starting a normal vanilla JavaScript app by creating an index.html file and then my shortcut here that I like to use is just typing in HD and selecting html5 and it just creates this skeleton which is super convenient I'm gonna replace this with like web modules tutorial cool now this is where I'm gonna show you guys how to serve the HTML file via a extension in vs code if you don't have yes good I'll show you how to do in node.js in just a little while but here is the extensions tab and then in here I just type in live server and you'll see this specific one click it go ahead and install this it's super handy and then when you have that installed all you have to do is go to your index.html file right click it and click open with live server and then what ends up happening is you get a application served to you by live server very conveniently however as I said if you don't want to use PS code you can just do this with plain nodejs so I've got a window open here and all you'll want to do is make sure you have no js' installed I've got a video link to in the description for you to install node.js you don't know how but let's assume you already have it installed what you would do is you would go ahead and install globally the HTTP P server module which is right here you can see it if that text is a little bit too small it just as npm install HTTP - server space - g and then go ahead and press Enter let this install cool so I went ahead and made the text a little bit bigger for you guys so you can clearly see it but once you have HTTP server installed using NPM and node.js what we want to do is make sure you're in the directory where your index.html file is so if I show the files in my directory you can see index.html is here and what I want to do is go ahead and run this exact line of code here we're gonna say HTTP - server and then press ENTER and now it is serving the HTML file for you all you have to do is go to this URL right here paste that into your web browser and it will be served here as you can see web modules tutorial is in the tab however due to just pure convenience I'm just going to continue using live server here within vs code suite so I've got my browser window open on the right and my vs code on the left and so let me just shrink this one just a little tiny bit so that you can see more of the code and what we want to do is we want to create a script file that is going to be our main entry point or the main application so just like you would with a normal app script dot j s go ahead and create that file and then I'm just gonna put something like console dot log hello world save it and then in my HTML file I'm going to create a script and set the source equal to script J s close it off save it and make sure that it's logging it you can see it's logging hello world so we know that we are in fact importing our script J's file as we we're planning but what we want to do is we want to be able to import other modules into our script J's file here using our import syntax so how do we do that well what I want to do first is I want to create a folder inside of here and I'm going to call this folder modules then inside of here I'm going to create a new file and I don't know I'm just going to call this module one module one Jas now just to kind of show how this works before we start digging into multiple modules and how the can actually be helpful for you is I want to export a single variable just to kind of show how this thing works so let's say we want to export an array we're gonna use the export keyboard and we're going to say Const so export Const and we want to name this variable we'll call it test array instead of equal to an array and we'll just say one two three so we're exporting a contest array equal to one two three now what we want to be able to do is import this array into our main script file so let's go ahead and use the import keyword then we're going to use open and closing brackets to destruct out exactly what from this module we want which specifically is test array so I'm going to copy this variable name and paste it into here and I'm gonna say from and the path to the file which is modules slash module one now I'm going to save this and what I want to do is try to log test array so console dot test console dot log test array and I'm going to save it and let's look what happens here as you can see it's not logging test array it says syntax error cannot use import statement outside of a module so here's the trick go into your index.html file where you have your script tag and before source or ilion's anywhere inside of the opening tag put a type equals module now save that and you can see this says 404 not found what we need to do is go back into our script file and the path here add dot and j/s to it save it and now you can see it is logging the array so that's one way to export from a module there's actually another way you can export from a module and that is by using default default is a little bit different than doing it this way let me go ahead and demonstrate what it looks like to use default and keep in mind if you use default you can only have one default export from any module so what you do is you simply replace these guys right here so the Const the variable name and the equal sign get rid of that and just put default so what we're saying is export default and then this is the value that we're wanting to export as the default value being exported from this module so when I save this as you can see it breaks that's because when we use default we actually have to import it in a different way first of all notice there's no variable name here okay so we aren't going to be destructing anything this module there is a default export so we don't have to destruct anything out and what are we gonna call this thing we can actually call it anything we want so whenever we have a default export whenever we import it we can call it whatever we want so in here I'm gonna call it whatever we want and then I'm going to copy this and log it and as you can see it logs the array right here we can also have a combination of both default and non default exports so let's just say this is the default thing we want to export but above this we also want to export a string and let's say export Const because remember we can only have one default export inside of a module so we're gonna export Const and we're gonna name this thing test string and we'll just call it hello world to be generic and I'm gonna save that and now in order to import that we can use it we can import it on the same line but we have to destruct this particular portion this part we don't destruct but this part we do so what does that look like well we have the default export here and what we can do is put a comma and then the destruct part here and the name of that was test string and when I save it I want to go ahead and log it as well test string when I saved it you can see it's logging both of these now so you can see we can have a combination of exporting both default and non default in the same module but the module can only have one default export okay cool but now what I want to do is show you how this can be handy now this again is in the web browser environments is not in the node.js environment so if you've ever used anything like angular or if you've used react that uses JavaScript modules in the node.js environment using things like web pack that's a little bit different than what we're doing here this is in the web browser so I'm gonna give you a real-life example where I personally use what JavaScript modules in the browser and that is specifically when I am creating libraries of functions or functions that I want to reuse in different applications and one function that I like to reuse in several different applications is this and I'll show you this exact example right now let's say I have a bunch of divs inside of a index.html file or any HTML file and they all have the same class name and I want to loop through these how can I do that well normally what you would possibly do is you would use a rate up from and then document.getelementbyid put that inside of there this is an HTML collection and then a readout from is converting that HTML collection into an array so that we can use for each on it so we can say for each now and now what we can do is actually just like book console dot log index but we have to pull that out so it'll just be like item and index now when I save it you can see we are looping and logging each index however what I like to do it's really convenient to me is to just simply have to extend the prototype of HTML collection so it's a HTML collection dot prototype dot array and array is the name of the function that I'm going to be creating a new method on HTML collection I'm calling it array and I'll set that equal to a function using function expressions here and I'm just going to return array dot from this and all this is saying is this is the thing you're calling array on so this in this case here would be literally this highlighted portion here so array dot from this and we're returning that and so now I can call this function on that so I'm going to cut this out and just to show you that it works I'm gonna do that and then we use array which I just created save it and you can see it still works but let's just say I'm like wow I like this this is pretty convenient and I want to create more functions that extend from HTML collection like a whole library of methods that are convenient to me but I want to reuse these in several different apps I don't want to just use it for this application or what you can now do is use modules so I'm going to cut that piece out and paste it into my module one and in here I'm going to just before this say export default so now I'm exporting default if I save this you can see it doesn't work that's because I have to import it and remember we're using a default export here so all we have to do is say import and I'm going to call this array and I'm gonna say from modules slash module one is save it and now you can see it's working just as expected so now I can use this this method by just simply importing it now what I want to do is convert that default export to a non default export and be able to export multiple of these prototype extensions here so what I want to do is go ahead and I'm going rename this from module one I'm gonna rename this to HTML collection and I'll have to update the import as well change that from module one to htmlcollection save it make sure it still works excellent what we want to do is we want to go ahead and basically just get rid of this and just say Const and we'll call this array is equal to that so now we're saying array is equal to that now what we want to do is we want to export this so let's say export Const array is equal to that now let's go ahead and save it and we have to destruct this remember if it's not a default export we have to destruct it out and now when we save this you can see it's still working so what I want to do is add a second one to our library here and we'll call it export Const whoa export Const first and set that equal to HTML collection prototype first that's a function and all it's going to do is it's going to return this 0 so it's going to return the first item in the HTML collection that we call this on so I'm going to save this and in order to import it we simply put a comma and then import first so now we have two things that we are importing from this same module right here so what I want to do is I just want to console dot log and by the way quickly just put in something so you can make sure that we're pulling out the right one so one through five here and now what I want to do is inside of here I just want to copy this paste it and then called up first on it save it you can see now here is literally the first item in the div so you know that the first method is working so here we are exporting two pieces from a module to prototype functions and we are importing them here and then we're using them so if we wanted to use this module in other apps on our server or on our local computer what we would have to do is just move this to more of a global workspace so like definitely outside of this project we would move this file to like the home folder or somewhere at the root and then inside of our script is when we import it we would import it from that location instead of this particular directory and we would have to make sure that our server is set up to serve that file and all that good stuff but that is lessons for another day but as you can see this is how you can use modules inside of the web browser in a way that will benefit you alright guys so I hope you have a better understanding of using JavaScript modules in the web browser again there are more ways you can use JavaScript modules in the web browser but I just wanted to give you guys a pretty decent basic introduction to using them in the web browser and hopefully you can come up with your own ways to use them and benefit you guys throughout your daily lives as developers awesome so if you guys like this video thumbs up subscribe if you haven't already and I'll see you guys in the next tutorial [Music]

Channel: PortEXE

Views: 1,761

Keywords: javascript, javascript modules, web modules, es6 modules, es6, web development, web development 2020, how to use javascript modules, import javascript, export javascript

Id: w9UlddvbiiM

Length: 14min 25sec (865 seconds)

Published: Thu May 21 2020