Webpack & TypeScript Setup #5 - Using ES6 Modules

Key Takeaways

okay then gang so sometimes in our project we might not always want to write all of our code inside one single file because that would make the file really long and hard to manage instead sometimes we like to split our code into different files now this makes our code more modular and more reusable and it makes it much easier to update as well now we saw an example of this when I showed you this diagram before so for example we might have an initial entry type secret file or JavaScript file in this case called a pas but then we can split our code into different modules or different files if you like like so so we could have a file or a module that just contains code that handles forms and we might have some kind of module that just contains code that handles database interactions so we can use different files and different modules in typescript and then have webpack combine all of those modules together into a single bundle file at the end so how do we do this exactly well first of all let me create another type script file and I'm going to call this forms CS and the job oops let me get this right yes the job of this file will be to contain code which is going to handle form submissions now we have a form right here remember with a few different imports and we can see that right here a name an email and an age so all we're going to do is handle the import from that form but it could be any form in the future so I'm actually just gonna paste some code right here which is from my github repo the link to that don't forget it's down below and all this is is a function stored in a constant called form data now if you're unaware of what any of this means definitely check out the typescript tutorial but basically inside this function we're taking in a parameter which were calling form and that must be of type HTML form elements so we pass in some kind of HTML form element that we get by querying the Dom into this thing right here this form data function and inside the function we then create a constant called inputs and we set that equal to the farm we pass in and we scope out a query selector to get all of the inputs from that form so in our case if we pass in the form right here it's going to grab all of these and store them in a collection right here called inputs now right here we say let value be of type and then this is an object where we're saying it can have multiple different properties and each property must be a string and the value of each property it must be a string as well now what ultimately going to be using this empty object to store all of the different key value pairs from our form so then we take the inputs and we cycle through those using for each we take each input in turn and then we take the values object right here and we create a property on this values object called input tag D or it's not called input ID we use the ID property from each inputs to create that property name now we have IDs on those name email and age so it's going to add a name property to the object an age property and an email property in turn and it's going to set the value of each one of those to the value of each input and that's going to be whatever a user types into these three things right here okay so that's all it's doing and then at the end is returning that values object so now we have that and say we want to use it inside this file right here all we need to do is say export like so and that exports this function and marks it for imports so we can now import it into another file so if I save that now and come over here I could import it inside this file and to do that I'd say import then curly braces and inside curly braces what do I want to import well I want to import this thing right here form data so I'm going to copy that and paste it right here and we need to say where this is front by saying from and then dot forward slash to say current directory because we're in the same directory as forms dot CS and then we want the forms file now we don't need to say je s or TS doesn't matter web pack is going to figure that out for us and we'll set up web pack shortly to do that so now we've imported that we could go ahead and use it so first of all we need to pass in a form to the function and I'm going to query the Dom to get that form right here so I'm going to say Const form is equal to documents doctor query select on and we want the form elements and we need to place an exclamation mark right here to say this is definitely going to be found otherwise typescript is going to throw a wobbler later on so now we have that form we can add an event listener to it and in fact so you don't have to watch me write this out because like I said this is not a typescript for beginners tutorial all I'm doing is pasting this in from my repo we have the form add an event listener submit event so when we click on the button we're taking the events parameter automatically and we prevent the default action when they submit occurs that means the page will then not reload as is the default behavior then we initialize a constant called data and set it equal to the form data function and pass in the form so remember whatever is returned from this is going to end up in this and that should be the values right so then we're just logging those values to the console so whatever we now do all of this stuff right here we should see all of those values logged as an object to the console so should this work well no we get an error when I've saved up and that's because it can't resolve forms so we need to make an edit to the webpack config file right here in order for this to work because we're trying to import this type script file and it doesn't know how to resolve it okay so all we need to do is add a property I'm going to add it above output but you can add it anywhere inside this module to export and it's called resolve and this is going to be an object in itself and then we have an extensions property to say what extensions we want webpack to be able to resolve so this is going to be an array and first of all I'm going to say dot es and also dot Jas so JavaScript extension files and also typescript extension files as well and now when we import something it's going to know how to resolve that file right here okay so we now need to restart this server down here because we've changed the webpack config file and going to press ctrl C and then yes to cancel out of this and then I'm gonna run NPM run server again fingers crossed this should work and it looks like we don't have any errors cool looking good and if we now enter in some information so Mario D male Mario that's the net ninja code at UK the age 35 press submit we should see that object down here which we do so we have a name property an email property and an age with those values so now we've seen how we can import different types group files into our entry file and we could do this in multiple different files as well so we could then create a third file and import that into forms or index again it really doesn't matter web pack is gonna then bundle all of those up into a single file and if we built this now it wouldn't build this into two files inside the public folder it would just combine everything and bundle them together into this one bundle dot J's file so that later on the browser only has one Network request to make for that one single file instead of many different files that you might create in the source or right here