Must Know JavaScript Bundler - Parcel
ฝัง
- เผยแพร่เมื่อ 12 ส.ค. 2019
- Bundling JavaScript is difficult and time consuming to setup with something like Webpack. That is where Parcel comes in. Parcel is the zero configuration alternative to Webpack, and it is unbelievably easy to get setup and running with. In this video I will show you exactly what Parcel is, how to get setup with it, and why you should be using Parcel. I am sure by the end of this video you will never want to touch Webpack again.
📚 Materials/References:
Parcel Website: parceljs.org/
🧠 Concepts Covered:
- What Parcel is
- Why you should use Parcel
- How to setup Parcel
- How to use the Parcel development server
🌎 Find Me Here:
My Website: webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ParcelJS #WDS #Parcel
![[MPD직캠] 베이비몬스터 직캠 8K 'FOREVER' (BABYMONSTER FanCam) | @MCOUNTDOWN_2024.7.11](http://i.ytimg.com/vi/ylRx8QOuGXo/mqdefault.jpg)
![[4K직캠] BABYMONSTER(베이비몬스터) - FOREVER](http://i.ytimg.com/vi/PS3UAFto1z8/mqdefault.jpg)
Webpack: Am I joke to you? 🤨
Parcel: Yes 😅
For anyone coming here and realising that things might not be working as they should...take note that in the video he's using Parcel v1 while the official docs now reflect Parcel v2. Parcel v2 is not called "parcel-bundler", its now just called "parcel"
This channel makes content that is really interesting and easy to understand. I especially like how you always start with an empty folder so we can follow through from the first second to the last. Keep up the good work!
Thank you! I try to make my videos as easy as possible to follow along for people of any skill level. I always hated tutorials that start with 90% of the code written. It is just too much work to follow along with.
Amen to that!
Whens the hair tutorial coming?
I should make that my 1 million sub special ;P
Cant even learn when Im gazing at that amazing hairdo
@@WebDevSimplified i guess hair tutorial is coming soon
3k left until hair tutorial
Omg man, i have been struggling into building my environment the past 48h for a phaser + typescript + sass + hot reloads project and was finally done with it like 3 hours ago and then your video pop up on my youtube recommendations to rock my world, i just deleted my stuff and started again with parcel, took me literally 10 min to put everything in place and have better result than what i did earlier, i love you and hate you at the same time, but thanks a lot, your videos are very helpful
I went through the same thing as you with webpack.
God, I just spent an hour trying to configure Webpack. Came to this video and got everything setup in less than 10 minutes. Thanks!
Thank you very much. For beginners like me, these types of videos create a quick and good starting point to get more familiar with these technologies
Always my first pick when comes to tutorials ! Great content 👍
Thanks a lot, Kyle! Awesome as always 👍!
Exactly what I needed. Maybe Parcel, but certainly the video.
I love this. Personally I was looking for a way to create a library for a webgame I'm working on.
I wanted to have code split up into folders(namespaces) and transpile them into a single usable JS file.
With Webpack I just had a splitting headache with all the configuration. Every time I changed something, other stuff would break or not work as expected.
This just saved my ass.
I mean, I love configurable software.. But if you have to read an entire documentation and walk into many walls when you're on a deadline, it just sucks.
This saved my ass :)
Thank you so much! :D
I’m a new subscriber and this really helped me out! :D
Edit: Very good video!
Thanks! I am really glad you enjoyed the video. Parcel makes things so much easier than they used to be just a few years ago.
You're life savour... Awesome stuff as always 👌👌✌✌
You're welcome!
Perfect Explanation
Very cool - i'll try to pitch this to the dev folks (.net-heads). I'm stepping right over webpack to parcel in my next personal gig.. Thanks!
You're welcome! God luck with the pitch.
If you use "npm init -y", you don't have to hit the enter key bunch of time to go with the default npm values.
thx :)
Or you can use:
```bash
npm init ---force
```
Parcel is pretty awesome!!
love you man
Me at 0:00: Why would i need parcel if i have webpack?
Me at 0:18: Oh ok, let's go Parcel! :D
Thanks!!
Mom: go play with the neighbour's kid!
The neighbour's kid: 0:00
LIKE before I watch because I already know it will be helpful
it is very useful Thanks
You're welcome!
Nice video. Tip: npm init + many enters === npm init -y
Just wondering about the usecases where webpack is prefered? I know it can be more customized but not sure about the scenarios
Great video Kyle! Keep up the good work. Could you please dedicate a tutorial to responsive images ? I tried looking it up and found mixed results that did not help at all :(
Yeh definitley. Are there any particular things you struggle with for responsive images?
@@WebDevSimplified Basically when I looked up how to make images responsive i read that using srcset is the "best way" to do it but I never actually seen any tutorials use it in a project. I would just like to know best practices and how to implement using Images in a website and as you scale down from desktop view to mobile view still have the content look good while the image is still present. (I hope that made sense)
just to clarify, today's parcel automatically refreshes the page when it changes. and beyond sass you can use typescript files too without any configuration.
Nice intro :)
Hi my localhost:1234 parcel generated server works fine, however when trying the dist index.html, my main.css isnt getting loaded neither are my image, in the dist folder a forward slash is getting added to the path if i remove it then it works, but how do I do that without having to edit my dist files
don't know what to say.thank you!
Hey Kyle, what's your take on Parcel vs. Vite?
Is the ./ in the paths necessary? Like I noticed the example ./../scss/main.scss
Hi Kyle, I have been practicing and learning JS. I have done a few little things but I don't where I can go from now. A few things I have heard about are frameworks like React, Angular and Vue.js. It's all still confusing to me. So I would like to request if you could do a video on what are they for, how to use them and what's the best tool for the right job. I enjoy your content, keep going!
That is a video I plan to do but I want to dive deep enough into Angular and Vue first before I make a comparison video. I would say if you have all 3 to choose from none will be a bad choice. React is probably the safest bet since it is the most widely used right now.
My 2 cents from Most to least complicated:
Angular : to learn this feels like forsaking anything you've known about JS to do trivial stuff like accessing dom or doing simple css animation. They do have the best CLI and are a full framework though. If you have a C or JAVA background, prefer OOP (read: never had a thing to do with JS but want to get into the web space till WASM kicks in), don't like standard JS event listeners and prefer to add other complex features like Observables (although it has its place), can't grasp 'this' or JS nuances, don't mind that your JS 'experience' won't be similar to your other JS peers but'll get high 5s from C/JAVA peers (typescript), like to over-engineer everything then this Framework is for you.
ReactJS : You'll breathe a sigh of relief because it feels more like JS just with more advanced patterns. I see many patterns (ie destructuring) in this library that have brought the popularity of real functional programming to the fore in web. If your roots are in JS and you understand 'this', how JS works or at least want to learn/get experience with JS patterns even if you don't quite appreciate it yet, this is for you.
VueJS : these guys took the best of both previous Framework/library and do a good job trying to keep the learnings low to what you already know and have gained popularity but not as mature as the other 2. The library has some real nice add-ons to make your already good app look polished. Good for those who are unsure of their path but want a low curve, knowing that they can advance to more complicated stuff.
Svelte JS : the newest and coolest (IMO) kid on the block as I share the reasoning that to NOT have a middle man (aka virtual dom) should be better than with one. This library borrows from all 3 mentioned above and without any vdom, is laughably slim in file size aka 'svelte' ; it has no extra crap and just compiles your code to native. The learning curve is lightest and you can follow in their online tut and see how little you have to learn to get going. Aside from a few 'library specific' notation (all libs do this) you'll fee like you're still in charge wielding your mighty JavaScript stick. This may be the LEAST mature of the lot, but has learned from its' predecessors so less pains to be had.
Give yourself a very small app to make in all 4 and 1 of them will click with you 4 but as WDS said ReactJS is super popular so you can't go wrong if you start with that.
great
Does he use parcel over webpack for everything or just this video?
How I can use this set up for my future projects
I recently bought CodeKit and like it. It seems to do the same stuff. Am I missing something?
when i installed parcel and ran dev mode. parcel is pointing to the js file in the DIS folder it created making it impossible to debug. how do i fix this bro? i've reinstalled it several times.
good stuff man! but i'm still working on my own projects, maybe you can do a video that shows where we can go to ask questions about the projects we are working on if we get stuck
I have a discord server linked in the description that you can join.
@@WebDevSimplified: awesome I'll check it out thanks!
Is there still any use case where Webpack cannot be replaced by Parcel??
I wonder how Parcel would perform in a React --typescript application ...
I have to try it soon... and your channel is awesome, don't give up on it!
There are definitely a ton of cases where you need webpack. Webpack is much more powerful and fully fledged so if you need to do more custom or unique things you will need to use webpack.
what happens when you have multiple pages on your website? How do you get parcel to see the other pages?
Try npm init -y to automatically accept all the defaults! 😃
what have u been doing before youtube ? freelancing or working for company ? btw great video as always
I was and still am working for a consulting company full time doing web development.
Learned that "dist" stands for "distribution"!
Parcel is not watching my modules, but only the entry file.
How can I change that?
Great tutorial bro, I wan t ask a question please and I hope you respond. I started learnin js a month and half ago and know I can make simple things like accordions carousels using Dom what I am asking you is what's next in js I should learn? Or is it enough for a front end developer to master Dom manipulation only and after that learn react? What should be done?
Once you master DOM manipulation I would focus on learning ES6 features of JS. From there learning a framework like React is an amazing next step since it is the next logical step after learning the fundamentals of JS and the DOM.
@@WebDevSimplified thank you web dev, should I focus on functional programming, oop and ajax in js …. Etc or just spend a day on them?
I would probably just jump into React before any of those since you can learn them on the way pretty easily as they come up. Knowing the very basics won't hurt though.
Great tutorial and great bundler. Yet I still don't know how to use parcel with multiple .html static pages. For some reason parcel doesn't make an entry point for css file in secondary pages, even if I copy script src js entry for each page ( and put it before closing the body ). I tryed " parcel src/index.html about.html " in json, nothing happens. It's weird because the js file is executed in every page ( tested with an alert ), but the scss only works in index.html. Do you guys have the same problem? Thanks!
maybe use something like js framework and a url router, ex: react with react router, that way you only need 1 static html but can have multiple pages
Can we use parcel to build a single page application like angular, react, or vue ???
You can use parcel to build an SPA. I actually have a video tutorial on creating page transitions for a single page app that came out recently. If you are building with React or Angular or Vue, then I would recommend using the command line tools those libraries offer to setup the project which will most likely use webpack.
bro i got o knew parcel trough your videos, i thought my life was
magically enhanced since them , but im having a hell lot of bugs with my
project, i got a index.html in the root and modules/index.html,
blog/index.html etc, that parcel does is show my homepage in any link
from menu i click. it seems as soon u got just one html is goes right
bot it lose itself wn u got multipages. any tip i could be doing wrong?
thanks
You need to make sure that the build command for parcel has all your html files passed to it and not just index.html.
thanks for answere bro but i think im already doing it im using this way on console(parcel index.html 404.html blog/index.html planos/index.html modulos/index.html)
@@diegognoatto590 That looks like it should work. I am not really sure what the issue is then.
Sir please, is it possible to include Parcel in my current or existing web application which is built PHP Codeigniter framework? In this project, I almost used all ES 6 & 7 features. I love the new features but my worry has been older browsers compatibility issues.. Thanks in advance.
I am assumming you can. I have not used codeigniter before though and don't really know anything about it though so I am not sure.
@@WebDevSimplified I will give it a try then. Thank you.
Any React JS tutorial for beginners?
September :)
@@SACHIN-gd6zy mtlb
@@RoshanKrSoniSoni on September he will launch his first React course, follow him on Twitter to get latest updates!
I am launching my beginner's React course in September. I just have a few more videos to record and some final work to get the site up and running. You can join the email list for the course at email.webdevsimplified.com if you want to be notified as soon as the course launches and get an additional discount.
@@WebDevSimplified thanks a lot. I'm waiting for your react tutorial. Your teaching way is amazing ❤️🙏🙏
zero-configuration...
yet has no imgmin and js obfuscator and no file concat
I thought they already released a plugin for that? github.com/DeMoorJasper/parcel-plugin-imagemin
But most of the companies internally uses webpack for example create react app, typesscript provides loader that is for webpack again, so there is risk loosing support in case of parcel
You only need to support webpack in your application if you plan to use it in your application. The nice thing is if you do need webpack you can easily replace parcel with webpack without losing any time other than the time it takes to configure webpack.
I have been following your channel since i find it to the point and knoweldgebale.. Can. U make some videos regarding like how to optimize a react application some advanced techniques tools to measure load time of application and how to reduce it, would be really helpful, improving performance is the most important aspect of any application which no channel focuses lately i have high hope with your channel
@@vaibhavm1986 Thanks for the suggestions. I will make sure to add them to my list of ideas. No promises, though, since I am not an expert in optimization. I generally focus more on clean code than optimization.
@@WebDevSimplified Cool, No worries, 😎
am I missing something though? whats the catch?
Webpack killer
5:04 AM I the only on who thinks it's odd to be importing a CSS file into a JS script file? Why doesn't the HTML file include the CSS using a tag?
This is a feature with node.js .Once you start using JS to automate building HTML elements, importing style sheets per JS component can be really handy for more complicated per component styling
If you have a totally simple project, Parcel is great. But it's not zero config if you need to do anything beyond that. V2 isn't stable yet (2021.08) and it's poorly documented.
I don't understand how this is any different than just hitting Shift+F5 in Chrome to clear cache and reload the page after you just hit CTRL+S to save your .js or .css file. You're still having to include the files yourself and you don't need a "server" running to view HTML, CSS or run JS scripts.
1. It is significantly quicker and more developer friendly than having to manually reload the page.
2. Parcel is not for the hot reloading, that is just a bonus. Parcel actually minifies and transpiles all your code. This means you can use the latest JS features without worry since it will get transpiled down so all browsers can read it. It will also minify and combine all files to be as optimal as possible. It just makes building for production a breeze.
@@WebDevSimplified Interesting. While I can understand the need for something like this even though it may be a use/case scenario, unfortunately, I have been too hands on for so long that i'd use this merely for about 5 minutes before i'd be Shift+F5'ing again and forgetting.
I was just talking about your channel at work today too, specifically your web socket chat video you did a couple months ago and how I was going to be re-watching it here in the next few days so I could refresh my memory on the structuring of it so I can build my own to implement at work. Keep at it!
@@ldt_ Thanks! I hope you enjoy the video the second time through. Also, if you are comfortable with your current workflow there is no need to add to it. I for example use almost no extensions for VSCode, which many people think is dumb but for me it just works and I am so used to it.
I love you
Will you please just blink every now and then?? You're like some kind of android, you never seem to blink! Your content is very helpful, though, so thank you for that.
300 lines of error code. Don't think it works on a Mac.
Well its good to know could you tell us how to deploy its pain in the ass :((
webpack isn't that bad tbh, it's the docs that is complete crap
What is your rush? I dont see how you are benefiting anyone at X3 speeds. Do you understand that most people that are new and that is why they are watching this will think fuck this too fast we cant even see what you are clicking on let alone you talk like you dont even want to spend the time but just post this to get some clicks. By the way, what is the advantage of using parcel for scss files when most people that use SCSS could have a much easier time using SASS live in visual studio code as an extension? Its faster than what you are trying to pump out in this video by far.