Must Know JavaScript Bundler - Parcel

if you've ever used webpack before you know it can be incredibly difficult to get started on a new project but what if I told you there's a library out there that can do everything that you want webpack to do but it only requires you to write one single line of code in today's video we're gonna be talking about that library which is called parcel so let's get started now welcome back to web dev simplified my name is Kyle and if you're new around here make sure you subscribe to the channel for more videos where I simplify the web for you now as you can see I have the parcel J's homepage pulled up which I'm going to have linked in the description below if you want to check it out yourself look at all the documentation but essentially if we scroll down here you can actually see the main things that parcel is going to do for us and the first two that it does is it actually bundles your application for you so it's going to take all of your JavaScript your HTML your CSS as CSS any of those different types of files you have it's going to bundle them up minified them and put them into a directory that you can deploy so that you have the most efficient application to deploy to your production environment also the really big thing that parcel does which I think is the most important is it does automatic transforms for you so essentially it'll take your s CSS and convert it to CSS it'll take your modules JavaScript and convert it normal JavaScript it'll use babel to transpile your javascript so you can use brand-new features of JavaScript and it'll transpile all the way down so that older browsers can actually use it this is by far the most important thing about parcel in my opinion also you can set up code splitting if you want to do that it does hot module replacement which essentially means that while you're editing your code it's automatically going to swap that code out in the browser without refreshing it for you so you can actually see your changes live without refreshing the page every single time and just some basic error logging but essentially the big thing about parcel versus read pack is all of this is automatic you just download parcel and it does it all for you so let me show you how this works inside of an actual application here I just have a blank application and what we're gonna do is install parcel into our application and to do that we first need to run NPM in it so that we can actually get an NPM project started up you just hit enter a bunch of times just do all the default values there we go that's going to give us a package JSON file and next if we type NPM I for install and we put - - save dev because this is only for development and we just want to type in here parcel bundler and when we hit enter this is actually going to download an install parcel for us onto our system so that we can use it this might take a little bit so I'm going to be back with you when this finishes now that we have parcel installed you'll actually see that we have it in our development dependencies we have parcel bundler and to get started with parcel all we need to do is add some scripts so up here what's create a script we're just going to call it dev because this is going to be for our dev environment and what we can do in here is we can just put parcel and then the name of the file we want to actually have as our entry point in our case we're going to use an index.html file so let's just create that now index.html and we can just put exclamation point and enter and that's actually going to vote up our HTML force and there we go next inside of here we can actually put in our build script this is going to be for when we deploy to production we want to build our application to make it as minified as possible before deploying it so what this is going to do is it's going to be essentially the same thing we're just going to put build in front here so we're gonna say parcel build index.html and now we can save that and we can just run that by saying npm run dev for example and this is going to set up our development environment it's going to minify everything for us and as you can see here and our distribution folder we have our index.html obviously nothing has changed because it's just our normal application but it does set up a server for us running that localhost one two three four and as you can see if we pull that up we get our index.html obviously this is blank right now so let's add some things to it we can just put this off to the side here and now we want to do is we want to open up our index.html file and let's put just a header in there we'll say H one is going to be header and if we save that you'll see that it automatically rebuilt our distribution folder over here for us but it doesn't refresh over here we have to actually manually refresh but that's okay now that we have the basics out of the way for how we need to handle our parcel setup let's actually look at all the benefits we can get with parcel by just jumping into some JavaScript and some CSS and the first thing I want to do is actually create a new folder we're gonna call this folder source and we're gonna put our index dot HTML inside of here and we need to change here our path to our index.html inside of our build script so let's make sure that we change that save it come down here if we just want to cancel out of our current build and run our new dev server so that we find as you can see it's building and if we refresh over here you see it's still working just fine so next let's create some folders in here we're going to create a folder which is going to be for s CSS and we're also going to create a folder which is going to be for our JavaScript now let's just create a main dot s CSS and also a main dot jeaious and normally if you wanted to use sass inside of your application you would need some kind of compiler to compile it down to CSS but again parcel is going to take care of all that for us so in here let's just set the background color to be red and let's make sure that we do this inside of a selector we're just can't use body for example this is going to look just like CSS which is fine and we save that and we can just import that instead of our JavaScript so we can just come in here and we can say we want to import from that s CSS folder we want to get main s CSS just like that now we can save that come inside of our index.html here and we want to include that script tag so we want to set a source the source is going to be from JavaScript main jeaious and let's just make sure that we defer this so now if we say that you see it's building everything up it's going to be building everything installing everything we need and if we refresh over here you see we now have a red background on our object instead of just that plain white background and that's because our CSS is getting converted here our sass is getting converted to CSS and it's coming through this import statement and actually getting imported into our index.html and we can actually see that by opening up our index.html here if we make this a little bit wider you can see that the first thing it's got is our script tag and then it also imports our link tag which is our style sheet for us and this is actually coming from in here you can see we have our style sheet with our body and this is converted to normal CSS from the S CSS sync tags and same thing with our JavaScript down here it has all the extra parcel stuff inside of it so now what we can do is also look at how we can do imports so let's create another file inside of here and we can just call this funk jazz and this is just going to export default a function and this function all it's going to do is just say console.log hi there we go and now instead of main what we can do is we can import that so we can say import funk from dot slash funk just like that and we could just call that function so we could just say funk we can save that and if we inspect this over here go over to our console you can see that we get high being printed out and if we look up in here we're seeing that we're only importing that one main je s and as you can see already parcel takes all of that manual configuration that you need to do in web pack and it just does it automatically for you and all you need to do is just run that dev script in order to have Parcel automatically recompile all of your assets every time you make a change so that you can view them in the web over here and that's it it's really as simple as that if you enjoyed this video make sure to check out my other videos which are linked over here and subscribe to the channel for more videos where I simplify the web for you thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 29,055

Keywords: webdevsimplified, parceljs, parcel js, parcel, parcel tutorial, parcel js tutorial, parceljs tutorial, parcel js example, parceljs example, parcel example, parceljs bundler, parcel bundler, parcel js bundler, parcel vs webpack, parcel js vs webpack, parceljs vs webpack, parcel javascript, how to use parcel, parcel guide, parceljs guide, parcel js guide, parceljs getting started, parcel js getting started, parcel getting started, parceljs build, parceljs server

Id: DblzpCoPakw

Length: 7min 24sec (444 seconds)

Published: Tue Aug 13 2019