The Parcel Bundler - A SUPER Easy JavaScript Bundler for your Projects

today I'm going to show you how to use parcel which is a blazing fast zero configuration web application bundler oh and hey I'd like to mention this video is sponsored calm now it's a brand new year here in 2019 and Skillshare will help keep you learning and thriving as they offer twenty five thousand different classes encoding design business and more for instance you're about to watch my javascript tutorial but you could watch this full course on the topic at Skillshare Skillshare is also super affordable with the subscription that only costs ten bucks a month but if you're one of the first 500 of my subscribers to click the link below here in the description to get the first two months free so take advantage what's up everyone Gary Simon of course Etro so today I'm gonna take a look at a bundler and I really haven't covered the most popular Bhandar with bundler yet which is web pack with four but I have covered golf in the past but I really wanted to cover parcel because I recently started using it and it is so amazingly simple to use alright so if I show you the site here is parcel j/s org and we could see I'm not going to go over everything that it does but the greatest benefit that it does have is the fact that it is so easy to get up and running without pretty much any configuration work and that's for sass that's for stylus that's for a bunch of things which you can find in their documentation I under asset types so all this stuff is really easy to deal with when you're dealing with the bundling of your application so first some people might be wondering why do you have to to bundle your app well and many of my tutorials that I do here I don't do that because they're so amazingly simple and so I just work strictly in index.html with inline JavaScript but when you're working on any project in any serious project and this party account for about 95% of them you're gonna want to use a bundler for multiple reasons it's going to reduce the size of your application it's a lot easier with code splitting to to organize your code there's just a lot of benefits to it so I'm going to show you how to get up and running I'm gonna stop talking now our today's question which bundler do you use is at webpack for maybe its parcel let me know in the description here and let's get started alright so the first thing we'll do is in your code project folder wherever you store your stuff let's go ahead and create a new folder with MK der and we'll call this parcel test and then also we'll CD into it after its created okay so now we will put in NPM you're going to need the node package manager in order to run this first I'm going to assume you have that if you look if you're already looking at JavaScript bundlers and such so NPM we're gonna run in it - why the Y flag - answer yes to all of these commands alright and then we will open up our code at a Durham using Visual Studio code so I can run code period and here we are with our package JSON file exciting stuff there's nothing in here of course because we haven't actually installed anything before we install anything though I wanted to get up just a basic project structure and just demonstrate a couple things and then show you how it will start to work when we integrate parcel so we're gonna have a source not a file a folder there you go right here inside of here we'll put in index.html as usual we will also put some scaffolding for HTML so exclamation point hit Enter alright that looks good right there and also we'll go ahead and just for now we will link a stylesheet in here and we're gonna put that in styles do it like this styles and it will call this now index I will just call this main CSS we're not gonna work with sass initially I will show you how to work with sass though and we'll save that and then also at the bottom we'll put in a script source and then we'll make that equal to index dot JSP R we'll put an h1 we'll just say my page for now and also image because I want to show you how to work with assets which is you know it's pretty much automatic here at this point with parcel what's put in images I'm gonna have one called Mountain dot PNG my mountain and I'll reference that in the YouTube description so that you can just grab it it's a royalty-free mountain that I found so I'm just going to drag it on to my folder here and then now we have some folders to create so images is one so we're gonna grab that put that in images move it yes we will also create our Styles folder here inside of the source and we'll create a main dot CSS file and for the CSS I'm just going to have body and we'll say background is yellow so we can all be blinded alright so we'll save all this we'll also create our index dot JSP inside of the source folder again okay so inside of our index jas we're going to work with modules here and the way we'll do this is we're gonna create another file first and I'm just gonna call this something like bro Jes so when you're dealing with a medium to large-sized application you're gonna have a bunch of JavaScript files just so you have and you're working with code splitting essentially and in keeping things organized so we're gonna create the dummest function you'll ever seen in your entire life for this demonstration and I'm just gonna say oh wow my phone's going off will say constant a function this way Const bro equals will pass in a greeting and we use our error function and we'll return with backticks our greeting up top Umbro so our function will only return the string of greeting with a comma and a bro okay and we're going to export bro okay so if we want to use it in our index j s5 which is the the entry point of our application then we can say import bro from bro and then we'll try to use it so in order to use it I guess we'll do instead of console logging I think we'll just do document query selector to select our h1 element there we go and inside of here we'll say text content equals bro and we'll say with backticks how is it going alright so we'll save that and everything should be working here now so let's go ahead and right click on our index.html open with live server this is from an extension so if you go over here to the extensions tab type in live server you can install it reload visual studio code and you'll have access to the ability to right-click and open with live server alright so there we go there's my page everything's looking except way here this does not say our string that we wanted from our bro function and we'll see of course we have uncaught syntax error unexpected token index j s it doesn't know what this is over here and that's because that is based on es6 syntax so you can't right now at this point in time browsers don't understand this now of course you could use require but if you wanted to use other specific es6 code in your application into future proof it then what we can do is use something like parcel or web pack and so in our case we're going to be using parcel to do this and it is dead simple the process of getting parcel up and running is quite a bit easier than using something like webpack so let's go ahead and we'll go to our selection note we'll go to view and we'll go to our terminal here and by the way let's close this pour it off we don't want that running and the reason is is because parcel when we run it it will have its own def server as well I don't want to get those two confused so here in parcel tests we are going to install and this comes straight from the parcel documentation will do NPM I for install I have a D to save it as a development dependency and then we can put in parcel bundler so what we can do is go over to our packaged our JSON file we can see that we have our parcel bundler as a dev dependency and under scripts we can create a new script we'll call this one dev and for dev will say parcel and then the source of our index date or the location of our index dot HTML file which is source index dot HTML all right and I'm also going to replicate this line just for future reference because we're going to also have a production command and we simply add Parcel build and we'll see how this works a little bit later on ok so with that we can then go back to our terminal we can run npm run dev alright and it's going to start the server's running and here we go it creates a dist folder with all of our files even our assets and our source maps now if I control shift I we can see of course it's already working because here is our function that we ran that appends bro at the end very simple and easy it was the the matter of making this work only took just a couple of seconds we simply just install parcel we create our scripts in packs JSON and there you go and peeing on dev it's awesome okay so now let's see what happens for instance if we want to use SAS instead so what would do is go to our main CSS right click rename to SAS SCSS okay there it wasn't read to refresh this it was actually changed and what come up here and we will say let's say we will make a variable the variable we'll make is I'll just call this something ridiculous again sup and we'll make it to light gray and then we'll just change our background like that alright so we'll save this and what we'll do is go back to our index dot j s5 and we're going to import our sass up here so to do that we simply import our Styles main dot s ESS and by the way you can import your CSS even if you weren't working with sass you could just import the CSS file that way and that way you can get rid of this line up here which we'll do right now we'll save that we'll come over here make this sass alright and now we've NPM run dead this it's going to notice that we don't have sass so it's going to install it for us so we'll let that run it's pretty goes pretty quickly and now if we go back we can now see it is gray and that's because we're now able to use sass very very cool stuff so also we can I just want to show you real quickly about importing other modules essentially so what we can do from other vendors what we can do is we'll say let's say we want to use scroll magic or something so NPM I scroll magic okay so I'll let that install real quick okay and now what we can do is we'll go to our index j s file as we're you currently in and we'll import scroll magic from scroll magic and this could be any library really and I'm going to take this straight from the documentation of squirrel magic I'm just gonna paste this in we're gonna take the set pin make sure it's on body element and duration will make it 500 pixels and you'll see how this ends up applying I if we go back to our browser here we can already see some things have changed however real quickly I go to my main sass and make the height of the viewport 200 viewport height save this hot reloading of course has worked in with with sass as well and now we can see some weird scrolling behavior from school magic and this simply lets us know that scroll magic is definitely working so very simple and now one final thing I'll show you is if we I'm going to real quickly get out of here and I'm gonna delete the dist folder and we're gonna rerun npm run dev and we'll see it creates our dist folder and i'm going to take a look at the size of things over here so if i open or reveal an explorer we'll see we have our source file here that our javascript file which is quite large 122 kilobytes so keep that in mind we'll get back out of there delete this again and npm run build or prod sorry that's the command that we created a package jason so this is going to create a production ville build and it won't launch a server this is just for production and now we can see it's going to let us know this the size of our files that we're working with in our Jas file went from 122 kilobytes to 23 kilobyte so this does a lot of work under the hood and we'll see that we have I all of this has been minified greatly awesome awesome stuff all right so hopefully you found that enjoyable and useful again answer today's question which is which bundler do you use let me know in the description here make sure to subscribe and I'll see you soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 55,966

Keywords: parcel bundler, parcel js, parcel tutorial, parcel bundler tutorial, javascript bundling, parceljs, parceljs tutorial, parcel webpack, javascript bundlers, javascript bundler tutorial, web development, parcel bundler typescript

Id: OK6akGZCC88

Length: 16min 15sec (975 seconds)

Published: Wed Feb 27 2019