Use Babel & Webpack To Compile ES2015 - ES2017

hey what's going on guys so in this video we're gonna create a development workflow to compile the latest features of JavaScript or equi script down to browser runnable code so basically es5 which is the the version of javascript that has been around forever and works in all browsers alright so this is not just to compile es6 or he is 2015 but also es 2016 and es 2017 ok so even features like a sink of weight we're gonna be able to compile those down and we're gonna do that by using webpack along with babel and a couple of different presets not only that but i'm also going to show you how to set up web pack dev server so that you can have a server environment that you can work in so you don't have to keep compiling down loading your application and so on it'll just constantly load in the browser every time you save your file alright so you're gonna learn quite a bit in this video when it comes to web pack and babble okay so let's get started this video is sponsored by GPD host they offer a variety of affordable hosting plans with flexible billing cycles these plans include a free ssl certificate a free domain name website builder and many other services including free website migration with no downtime to find out more visit GPD host com or click the link in the description below alright guys so very quick intro on web pack I do have a crash course on my channel if you're interested in that but basically it's used to take modules with dependencies and generate static assets from them okay that way we can build stuff with modules either custom that we build ourselves or stuff that we install from NPM and we can compile it down to code that can run in the browser alright so web pack is an amazing technology it's what runs behind things like the angular CLI the create react app CLI it compiles everything from those frameworks and its dependencies down to static assets that can run in the browser okay so it allows us to have really intricate and frameworks that can run without a back-end server web pack uses presets that can add extra functionality for example there's a react preset to compile react code there's also presets for babbles such as es 2015 2016 2017 but we're going to use is a preset called babel n for env and I'll get into that in a few minutes but that's the gist of what web pack is all right so now on to babble babble is a compiler that will take features from the latest versions of JavaScript or echo script and bring them down to es 5 so real quick if we go up to try it out then this is babble jst o / repple or repl now here what we can do is put es6 + code here and it'll get compiled over here to es 5 so you can actually see the conversion and what that looks like so for instance if we were to use let which is a way of declaring a block scope variable and this is this is part of es6 or es2015 not available in es5 if we were to create a variable here and just set it and set it to 1 2 3 on this side you'll see the es 5 version of this which uses VAR kvar has been around since the beginning of javascript it's let is not part of es 5 so that's why it's being converted alright now if we want to use like an arrow function here so if we want to go the console dot log and just say 1 2 3 on this side you'll see not only did it change let to var but it also changed the arrow function to just a standard function here that returns the console log now when we set up web pack with babel we're going to need to use a preset okay and presets are basically plugins and they have plugins or presets for es 2015 which will compile down es 2015 or es6 yes 2016 2017 and then they had this one called latest which basically all three of these together so that you could compile down anything from any of these but that's been deprecated in favor of n for E and V which is this right here so this is what we'll be using and this is very powerful because you can target certain browsers certain versions you can target certain features that you want to use but we're just going to use just a standard preset no configuration nothing like that but that's what we'll be using all right we're also gonna need to use something called a polyfill which I'll explain later on alright so enough of the babel no pun intended and we're gonna create a new folder here called babel underscore web pack underscore starter all right so we're gonna open this with Visual Studio code or whatever text editor you're using and let's go ahead and open up a terminal now I'm gonna be using my integrated terminal with vs code so if you want to do that you can go to view integrated terminal or you can do control tilde and you can toggle it that way I also have get bash integrated with the terminal so first thing we're gonna do is run NPM in knit because we want a package.json file now if you've never worked with web pack before you're probably wondering saying what are we building a node.js application why are we doing you know building up why are we creating a package.json file well that's what web pack does it allows you to use NPM modules or your own modules and it compiles them down to static assets so that you can run it in the browser you don't need a node server to run to run that's the beauty of web pack so that's what we're gonna do or I'm just gonna create a simple package JSON file real quick and let's open that up okay we need to install a few dependencies here a few modules so let's say npm install and these should all be dev dependencies so we want to do - - save - dev alright we're gonna want to install web pack you also want something webpack - dev - server we want Babel core we want the Babel loader for webpack and we want the env preset so that's babble - preset - env okay I think that's everything for now so let's run that alright so now what we want to do is create a config file for web packs so we're gonna go ahead and say new file and let's call this web pack dot config dot j s okay actually before we do that I just want to add a script in package dot Jason now a lot of tutorials will tell you to actually install web pack globally you do not have to do that what you want to do is create a script here I'm gonna call it build and then just set that to web pack like that all right we're gonna save that and that way when we're ready to compile our java script we can just say npm run build and that will compile it down okay now this config file is is where we're going to define the source folder though the source application the source file that we're going to use and then the output okay where do we want it to output into es5 so first thing I'm gonna do is I'm just gonna bring in a module called path which is actually a core module so we didn't have to install it or anything and if you've used nodejs before you've probably used path it's just for manipulating file paths and things like that so then we're gonna just do module dot exports and set this to an object and then this is where we define our entry point so this is going to be an object and we want to say app and then in here is where we want to we want to tell it which file we want to use to basically be our source file so I want to have us a folder called source or SRC and then a file called app dot J s okay so that's gonna be the entry point to our application now what we want to do is put a comma here we want to put the output okay remember we're having our app j s file which will have es6 es seven you know all that stuff all the new JavaScript features and then it's going to be compiled down to es five and that's where this output is going to be okay so we want to specify path and we're just gonna say path dot resolved we're gonna use that path module and we're gonna define double underscored our name which just means the current directory and then a folder called build okay and you can call this whatever you want I like to call it build some people like to call it dist or output you can call it whatever you want but we're gonna call it filled so that's where I compiled JavaScript will go now it needs a file name as well so since it's going to be the app J s and as well as any modules that we create and we import into a PJs it's basically going to be a bundle of JavaScript so it's often called app or something like app bundle dot GIS or just bundle J s whatever you want to call it is fine but that's what we're gonna call it so the next thing we wanted to fine here is module and this is where we define our loaders so I wanna say loaders and remember we installed that Babel loader that's what we're gonna put here so this needs to be an array we're gonna put in an object here now the first thing we're gonna have is test which is going to be a regular expression okay so we're going to use two slashes that's how we define a regular expression literal and we're just gonna say that we want to look at all javascript files all dot j s files so i'm going to put in the backslash which is an escape character and then a dot so that means that I want this dot to be taken literally not as a meta character okay the escape is making it so it's a literal dot then J s and then question mark which makes it optional and then the money sign which means it's the end okay so it's the end any dot J's file alright and then the next thing we want is to put in exclude because we want to we want to exclude the node modules folder okay we don't want to do anything with any node modules folder and then we want to define the loader itself which is going to be babel loader okay I remember we installed that with NPM and then we just want query and in query which is an object this is where we define our presets okay and presets is gonna be an array and for now we're just gonna put in env that's the preset that we want to use so that's it that's our entire config file for now so not too hard to understand we have an entry point for our es6 and es7 and whatever else we wanted we want to write we can use modules we can use whatever we want from any standard and then it's going to be output into build slash app bundle J s and that's the file we want to include in our HTML okay and then we just have our babel loader as our module here as our loader so let's save that and then let's create a new folder called source okay because remember we're gonna look in source and then we're gonna look for a pas so we're gonna create that and for now what I'm gonna do is just put in some I'll do the same thing I did in the in the repple just to test equals one two three actually we'll just set it to an arrow ah can't type the console dot log one two three and save alright so what I want to do now is compile this so if we look in package dot Jason we created our build script here so we should be able to run this so let's open up our terminal I'll clear it out we'll say NPM run build all right so no red so no errors everything should have one alright so up here if we look we have a build folder now creates automatically we don't have to create it and then in app bundle dot J s now there's going to be a bunch of crap in here that doesn't matter to us what we do want to look at if we keep scrolling is this right here okay so this is the code that we wrote compiled so you can see that it used var instead of let and it used a regular function instead of an arrow function so this es6 got compiled down to this es5 so this is going to work in all browsers all right so this is what we want to include in our HTML so what I'm gonna do is create an HTML file in the root here called index dot HTML and I'm just gonna put some basic head body tags with Emmet the title I'm just gonna say my JavaScript app I'll just put h1 here all right and then we want to go down here and include a script with the source of dot slash meaning we want to look in the current directory for build and then app dot bundle dot J s okay so that's gonna look at our compiled file that's what it's going to load so we'll save that and now let's go to app J s and let's just call test ok so we'll save that and then we're gonna recompile so npm run build and then let's go and open up our index file and let's hit f12 and we get one two three all right so it's actually compiling and it's loading into this HTML file and if we look at our source code click on this app bundle you'll see our compiled es5 code alright so that's how it works now keeping it like this is gonna be kind of a pain in the ass because every time you make a change you're gonna have to recompile if we change this to from one to three to let's say hello and save and we open up our index.html again and look in the console we still get one two three all right in order for that to change then we'd have to go back and we'd have to again run npm run build compile it and then reload and then we get hello so this is where web pack dev server comes in so to do this this is actually really easy all we have to do is go to web pack config i'm sorry package jason and we're gonna add another script here okay we're gonna do a start script that way we can just do npm start alright and then we want to set this to webpack - dev - server and then we need to specify an output flag okay so we're gonna say output actually output - public - path and we want to set that equal to whatever our output path was which is build okay so we want to go like that and then we'll go ahead and save this and then go down here and instead of running run build let's do NPM start alright so now you can see that this is actually started on port 8081 I believe it's 8080 by default but I think I have something running on that already so let's go ahead and open this up can I open it up like that I guess not so let's go to localhost port 8081 and there's our application that favicon will go away if I reload and it says hello all right so I'm just gonna snap this to the side here now this is going to continuously run and continuously watch our applications so if I go to app j/s and I change this back to one two three and save not only is it going to reload it's also going to reload the browser for us so we don't even have to do that so web pack dev server is a really nice tool to have if you're working with web pack so the idea is to use that until you know you're ready to build and then you do NPM run build you have your static assets and you can upload to your server or whatever it is you're doing with your application alright so now let's take a look at one of the reasons why we're even doing this and that's to use modules so let's clear this out and what I'm gonna do is create in my source folder a new file called Lib das okay and this is going to be a module I want to export something from this and import it into App which is something we cannot do just within regular JavaScript within the browser at least yet so what I'm gonna do is say export and then I'm gonna create a variable called person and I'm gonna set this to an object literal and just say name John Doe let's say location Miami and age 30 all right so we just have this person object and we're exporting it okay exporting meaning that we're making it available to other files so let's save this let's go back to AB js' and let's go ahead and say import put some curly braces here and say person from dot slash lib okay we don't need the dot J s the file name not the extension and then we'll go down here and let's do alerts will say alert person dot name and save and that should reload and run and we get John Doe so this John Doe this person dot name is coming from another filed so this is very very powerful when building applications and gives you a more of a you know a react or angular type feel you can build applications that seem like framework type applications rather than putting everything in one file or including a bunch of these script tags with a bunch of different files so the module system is very very powerful all right and you can have other things you can export other things here like let's say we want to export a function so we'll say export function say hello so go like that and let's say this takes in a name and then we'll say we'll just return and we'll use a template literal here we'll just say hello name like that so we'll save and then we can go back to our ads that's gonna reload every time we save maybe we should do a console log and then what we can do is we're using destructuring here and we can also pull out other things from this file such as say hello and then we'll go down here and we'll call say hello and let's pass in a name we'll just say Brad let's save and down here whoops wait a minute what'd I do oh I got a since I just returned it here we have to console.log the function so we'll save and then we get John Doe which comes from this line and then hello Brad which comes from this and both of these are coming from our Lib Jas file here alright so that is modules now I want to take a look at a newer feature of es 2017 which is async/await alright now I'm not going to go over the over async/await and 10 really talk about it I'm gonna do that in a different video we're also going to be talked about that and the new udemy course coming out but it's just a better way to handle asynchronous operations so what we can do is we can say async we can label a function asynchronous which makes it return a promise automatically I would say get posts okay and then what I'm going to do is create a variable here called response and then I'm going to set it equal to I'm going to use fetch to get something from Jason placeholder which is basically a fake REST API that we can use I've used it in quite a few videos but we can make requests to like this post URL right here so what I'm gonna do is I'm gonna say a weight fetch and if you don't know what fetch is it's pot it's a new standard in the browser to make HTTP requests and it returns data as a promise so since it returns as a promise we're gonna say a weight and then we're gonna pass in this URL like that and then we're gonna say right under it Const data and we can say equals a weight response dot jason and then we can return that data all right why am I getting a error here oh I don't have quotes in here okay so that's our get put that's our get post asynchronous function now to call this since it's it we called it async then it's going to return a promise so we say get posts and with promises we use dot then and we'll pass in here posts and then we'll just console dot log posts all right so if we go ahead and save this and we let this run we're gonna get an error so we get this regenerator run time is not defined and to fix this we actually need to use the babel polyfill all right if I were to search this see what we get if we search this error here right here I'm trying to use async await with Babel six so right here Babel polyfill is required you must use that in order to get why is this not responsive why is Stack Overflow not responsive but you'll see that we need to install Babel polyfill along with this Babel preset stage zero and then down here we need to add that to our web pack config file okay so let's do that let's go ahead and ctrl C stop this webpack dev server and we're gonna do NPM install - - save - dev and we want to install babel - poly fill as well as babel - shoot what was it i always forget this one babel preset stage - zero alright so install those two things now that by itself isn't gonna work we need to go to our web pack config file and from here we want to add on to the app in the entry so I'm just gonna put I'm gonna go right above it and we're just gonna put in some quotes and we're gonna say babble - polyfill and then a comma and then down here with our presets we just want to include that stage zero preset alright and that should do it so let's save let's go back over here and let's run NPM start let's have our page up here and run NPM start ok looks like we got an error unexpected token where is this let's see what did I do wrong here Babel polyfill oh I did this idiot this goes in here so app and then this should be an array and we'll put that in there like that yeah that should do it so let's save that let's try it again and Pam start okay let's reload and there we go if we look down here we're now fetching our post so this is coming from right here our async/await get post function we're returning a promise here getting the post and we're logging them so you can see that now this can be used this this web pack babble starter package can be used to compile down anything from es2015 1617 to es 5 so it's something that you can continuously use and hopefully you guys will use it now as far as compiling like let's say you just built an awesome application with modules with a sink of weight and all that all you got to do is now simply do and where is it npm run build and then it builds it out into that app bundle file you have your index.html file so you could simply let's say this is your web server you could just take the build and the index.html go in there open up your file and let's open up our console and we have our posts ok and we're using it's all compiled down to this one file and you could have you could have 30 different modules it would still all compile down to that one file alright so hopefully you guys enjoyed this and that's it thanks for watching hey guys I just want to mention our sponsor GPD host so if you're looking for affordable fast and quality cpanel hosting look no further they offer many types of packages that include a free domain name free SSL certificate a website builder and more all hosting plans are completely managed and easy to work with you also get automatic weekly backups so whether you have a website to transfer or you're building it from scratch GPD host is a high quality solution to learn more visit GPD host comm or click the link in the description below

Channel: Traversy Media

Views: 95,744

Rating: 4.9389315 out of 5

Keywords: webpack, babel, webpack babel, es2015, es2016, es2017, es6, es7, es8, async await, es6 modules, compile javascript, webpack-dev-server

Id: iWUR04B42Hc

Length: 29min 53sec (1793 seconds)

Published: Wed Nov 29 2017