Quick Start Guide to Parcel JS

Key Takeaways

hey everybody I wanted to do a little tutorial on parcel now if you already use webpack or gulp you know that we need these tools to do things like compile our sass files and CSS files and concatenate our JavaScript files and minify them now web pack and gulp are great tools not knocking them at all but one pain point that I found is that you do have to set up this config file before you can even do anything and of course this is great if you have a complex website and you have a lot of tasks that you need to have that extra level of control but if you're a beginner or you're just setting up a really quick front-end website projects you don't want to have to spend all that extra time setting up all your configuration for your build this is where parcel comes in even just out of the box it comes with a lot of defaults where it'll automatically convert your sass files of CSS files and you can concatenate multiple JavaScript files into one file so it'll save you a lot of time and honestly I think I'm going to be using parcel from now on instead of gulp at least for all my simple projects so let's get started and I'll show you how you can get up and running with parcel in just a few minutes I think you're gonna really like this so here's our website it's at parcel J org they say they are blazing fast you're a configuration web application bundler which I suppose is true let's click on this get started ok like everything else you can install parcel on the command line by using NPM or gulp or I'm sorry NPM or yarn and we're gonna use the yarn in this case so I have this little mini project setup array with like an HTML file a JavaScript file and a sass file so let us install parcel ok pretty easy and then the next thing we want to do is create a package JSON file so er9 it ok here's a package JSON file is just you know our basic information here and then the next thing to do is to run parcel to build your website all you have to do is type parcel and then your HTML file in my case it's index.html and we can see here another awesome part of parcel is that it will spin up a local server for you so localhost with port 1 2 3 4 everything's been built and let's check that out alright so as you can see this website it's just very bare-bones I just wanted to create a simple site to you know just demonstrate different things and test out some of the compiling and make sure possible does everything we want to do and yes this text is upside down if you just need the basic configuration that's literally all you need to do now let's see how parcel works in our index.html file we're loading up here our script JS file so in here in our JavaScript file this is where you can import your sass files or you know other father's for using less but I think most people nowadays use sass and I personally use the S CSS syntax for sass so import that here and then I added some JavaScript here I had this thing with es6 syntax just to test that so that's how parsil works when you run the parcel command on the command line it has this dist folder and in it it adds the compiled HTML CSS and JavaScript files you can see here in the original HTML file there's no reference to your CSS file but in the compiled one it did add the link to the CSS file which is here and this is basically everything that I had in my sass file and obviously it has the JavaScript file which has a lot of parcel stuff but here's the code that I had added here so it just does a lot of things for you and you don't need to worry about them now one thing I did want to check was we want to make sure that our CSS styles that need prefixing have their prefixes and if you see here I have a transform property in the CSS file it's just transform we don't have the WebKit one so what do we to do for that if you if we look back on their website we can see that they actually have pretty good documentation on different things you can compile and build so under this CSS section so you can use poast CSS to use autoprefixer autoprefixer excuse me which is what we want to do so unfortunately this doesn't mean that we need to create a config file but let's add autoprefixer down here so we'll stop our staging server and install post CSS and it's thinking all right everything's done so now in our package JSON file you can see that we have autoprefixer and post CSS modules added so let's just rerun parcel index.html oh I'm sorry actually I forgot we need to create this config file post CSS RC so we'll create that new file here I'm gonna test this out but I did run into some issues earlier when I was trying to do this we will deal with those as they come so let's rebuild and you can see it's installing sass so it seems like something's happening let's make sure that our website loads quickly and ok looks like something went wrong here the transforms not working there's just no CSS for this test class here so let's see what happened so this is again the compiled CSS file that we have and it looks like it did add our prefix transform property but it did this weird thing that I did read about where before we had just this test class and now it added all this extra like I guess randomly generated stuff I'm assuming to make it unique or something obviously that's not what we want because in our compiled HTML file it still has this class test so I'm not sure exactly what this bug is but it's not something we want to happen I think there might honestly be a mistake in this config here because I looked online somewhere else and they actually didn't have this modules true line and they didn't have this stuff here for autoprefixer so we just had plugins autoprefixer is set to true okay so it looks like it did build when I updated that which is kind of cool so this is our compiled CSS file the test class is back to normal still has Auto prefix tiles and let's load the site actually looks like it auto reloaded which is kind of cool let's test that really quick so we'll go back to our SPSS file let's just do color red let's see if it okay so in the process of running your little staging server anytime you make any kind of change it will yeah it looks like it'll it'll rebuild so that's another cool little feature that parcel does for you that you don't need to hit ctrl R f5 or whatever it is that used to reload your page and the last thing we want to check is you remember we did this es6 syntax here so this is a compiled JavaScript file again and we can see here I had a Const called test number and it has converted it to of R so that's really all you need to do if you just have a simple website project with CSS and JavaScript yeah I'm I'm pretty much gonna just use parcel from now on instead of gulp I think parcel is just it's just so easy to get up and running you can just have this ready to go and maybe a couple minutes anyway I hope you found this tutorial helpful if you have any questions feel free to leave a comment below otherwise we'll see you next time thanks for watching