The Parcel Bundler - A SUPER Easy JavaScript Bundler for your Projects
ฝัง
- เผยแพร่เมื่อ 26 ก.พ. 2019
- skl.sh/designcourse20 - First 500 people to sign up will get their first 2 months free!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to take at a super fast and easy to use bundler called Parcel for your JavaScript projects. If you're coming from Webpack and are frustrated with some of the setup that's required, you might find that Parcel is easier to work with. That's what we're going to take a look at today with this parcel tutorial!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! - แนวปฏิบัติและการใช้ชีวิต
Which bundler do you use in your projects?
Both! Webpack for big Apps (MERN, MEVN, MEAN) since it allow me to control site deployment. Parcel for small app quick testing, portfolio and etc. AFAIK they both are good!
I use task runner (Y) gulp!
Webpack
Webpack and Gulp. Depends on the framework l am using.
Great video, touched all the great points 👌🏼, thanks mate.
I used Gulp, but with React I m using webpack, but this is so interesting lession.
Awesome !!!
Today I just learnt about it from coding phase. That it's a thing.
Now suddenly I stumble on the tutorial ... that's perfect !!!! ❤
i am just in love with parcel now, i started web development and i just about to get a serious contract for a webapp and i was working with vanilla javascript, i found awesome the way you explain webpack in your video, and now i am in love with parcel because is simpler and clean to configure thanks for the video, it helps me a lot just rigth now
Parcel of course! Webpack drives me crazy ...!!
Webpack is horrid.
I found out a few weeks ago that you can save a filename as "foo/bar" and vsc automatically creates the folder and puts the new file inside it.
Changed my life. I'm 34 years old now with 2 kids and 1 more (probably my neighbors) on the way :')
Humor not clear here. Your neighbor fucked the wife or what? Or just taking care of his kids? Either way good job.
This seems awesome! Super easy to use! I will for sure use this in the future!
Was watching the webpack video until you suggested parcel was easy and I come to agree 💯. Thank you, helped me easily bundle my portfolio
Thanks for a great and easy tutorial. Well done!!
I like this and I like it thousand of times, thank you, brilant good teaching!
Great video. High quality and to the point. Thanks.
Thanks for this!
Never use a bundler before.
This will be my 1st. *wink wink*
Very helpfull, as always!! keep on.
That's an excellent intro to parcel. My question: in what situations does it make more sense to use webpack instead of parcel?
your tutorials are always so good! will you do a quick look video like this on Rollup too?
For those who get this error:
dev.... /usr/local/lib/node_modules/parcel-bundler/src/builtins/css-loader.js: Invalid Version: undefined
The solution to this is to either uninstall parcel and install it's previous version, which is 1.12.3 or update to the version 2 of Parcel.
You can do the first solution by:
npm uninstall parcel-bundler --save-dev
npm i --save-dev parcel-bundler@1.12.3
Or the second solution by writing:
npm install parcel-bundler@next --save-dev
Awesome , you just opened my eyes on development. =)
this is really amazing
SUPER helpful. Thanks!
You just make it simple maan i like it
i'm using blendid, thanks for this.
Top Notch! I'm using a Parcel for a long time now. I would love to have a Tutorial on Code Splitting and Lazy Loading with Parcel.
Did you got any. I am also looking for code splitting.
@@letsfightboss7609 Nope. This may help parceljs.org/code_splitting.html.
Love me some Parcel, Webpack and the infinite rabiithole was such a pain!
This is greatly appreciated. I use a Webpack build system that runs GULP tasks. I'm learning Parcel because it was the recommended bundler by a tutorial I'm using. I tried to use Webpack but ran into problems troubleshooting issues with the project, and just want to follow the recommendations.
easier than Webpack. Thanks Gary.
Thank you!
Woohooo. Thanks for this :D
thank you!
i'm using gulp for 2 projects with the bunch of rules, mostly just building combined stuff already (not hotreloads with watchers etc). However i really really like that webpack config which is now bundled with Vue.js (2.5+). That's super amazing and does much more it seems. Interesting topic, i might actually try this parcel thing for some of my old projects which either use some primitive manual packs or not using anything at all (yet)
I like this one
Thanks for share, but how can you control the output folders? or create a static structure of folders? thanks
thank you .... can you make a video about using parcel with vue-cli ?(because by default vue-cli comes with webpack)
wow... after a long time learning webpack, now I feel like Tom Hanks lighting the lighter
Really cool stuff..! I saw you have a Dart extension, maybe you can show something about Dart and Flutter!! :)
love it
Great!
Super helpfull
9:20
npm i -D parcel-bundler
"dev": "parcel src/index.html",
"prod": "parcel build src/index.html"
npm run dev
npm run prod
If you have an issue with "no such file found" when importing sass using index.js,
just try changing css extension in index.html to .scss instead
How do you use parceljs and angular-cli? Angular cli uses webpack, so
First french comment ! Coucou de la france :)
Hello du Nord de la France.
Hello! Un Parisien tête de chien par ici :)
The arrow function can be even shorter, since parentheses aren't needed for only one argument, curly braces aren't needed for only one line, and return is implied:
const bro = greeting => `${greeting}, bro`;
Webpack is the best :)
Why?
Could this be the webpack killer? Looks really good, ill check it out for sure.. thanks for my free 2 months :) theres plenty of other stuff on there besides web dev, so I’ve given it a test run!
So uhmm... I was about to start learning Webpack... so, shall use Parcel instead?
Or I guess Parcel is better suited for small to mid-size projects and Webpack for Angular-based large projects?
You'll definitely want to learn Webpack and GULP if you are looking to work in the industry, at a company, or with larger frameworks and projects. That's what a lot of tutorials for frameworks will use too. The learning curve is a bit steep, but it's not too bad after a while. It's a necessary evil. Once you know that, then you can actually use Parcel in your daily life as a bundler for personal projects that a complete build system would be overkill for. Parcel has things that may overwhelm you when you troubleshoot them if you aren't already familiar with how modular Webpack is with something like Gulp tasks and other libraries running on it. Think of it like learning Bootstrap instead of how to build responsive applications with CSS. Hope that helps...
Laravel mix, since it's embedded in all laravel projects. Have tried webpack and wasn't satisfied at all.. but parcel is looking quite intuitive.
what the pack!
I use Parcel in my own projects, Webpack in business projects!
Why? What does webpack do that you cannot do in a parcel setup?
What are the benefits of import the scss on the index.js file instead the html? thanks
had to work with webpack for some times and IF it runs it performs okay, but if not ... its a real pain in the arse 😒 i'm start using parcel now, because i think that this is actually as things are intended to use... most of the time till now i was using gulp, which still performs well
Is there anything wrong with the voice and the video ? They are not in sync in my end (Check 8:37 for example).
How does it handle cache? (Css/Js)?
Thanks for the tutorial Gary. You mentioned Hot Reloading, but what about browser reloading? I noticed you kept clicking the refresh button on the browser. I am liking Parcel and its quick setup, but would like to have auto reload. Thanks
I don't think he was pressing the reload button. Browser auto refresh is part of hot reloading, as far as I know, and should be working for you out of the box. If not, stop and re-start the parcel server (ctrl+c to kill, `parcel index.html` to re-start). All your css/sass saves should instantly appear in your browser (running localhost:1234/index.html) and any html and js updates should refresh the page automatically. Good luck!
parcel blew my mind. honestly, why would people use webpack when parcel simplifies life this much?
I was using Gulp task runner, but Parcel is just so dam easy to implement. 2 lines of code in my package.json and I'm off the races. One config for my development phase and another config for deployment. Its fast, it optimizes my code, wow. One word of caution though parcel removes access to the global window object. Create a global variable in JavaScript;-
myNum = 60;
then try accessing it from inside a function.
function randomizer(limit) {
let myNum = Math.floor(Math.random() * limit);
console.log("myNum is " + myNum);
console.log("Global myNum is " + window.myNum);
if (window.myNum == undefined) {
console.log("Can't access global object when using parcel bundler");
}
return myNum;
}
randomizer(100);
This will get you a console message that says;
Global myNum is undefined
I have not been able to find a work around for this other than not using globals like this in this way.
In the bundle are crammed apart from js other assets as css,jsons maybe images,as webpackDies.If yes does the bundle has a code that injects that kind of resources(css/jsons) in the dom after the bundle is loaded?
Hey Everyone, I am stuck on a CSS property. When I use list-style-image with my SVG file I can't see it on the browser and it's like giant white spaces are everywhere. This is for my unordered list of course. How can I incorporate my images for the bullets correctly. Thanks
Do I have to install it for every project or is copying the dependency of the package json sufficient? And what if Im programming on two devices, will it install automatically depending on my package.json? I assume my IDEA WebStorm will do the job if a dependency is missing but does VSC does it too?
Wondring how dose it work with other server languages like ruby Or php?
Wesh Kamel hahaha ça fait plaisir khouya :-D par hasard l9it comment ta3ak ! nteb3ouk fi koul makan ghir l dar bark haha
Hope you found your answer since then ! i think it depends on each language's framework for exemple Rails for ruby and Laravel for php
I liked the parcel bundler I will try! but my mind is telling me to use webpack!
I'm having trouble understanding what this is for. Do you still need it if you don't care about browser support for JS 'import' statements?
Hey, great video! So Parcel is used to have live server while you develop and minifies the files for uploading on the server with "prod "?
anyone knows if we can use parceljs with handlebars(nodejs+epress+handlebars+boostrap)?
please assist, I would like to Calculate
I find when separating my code using
I have an onclick event that works prior to partitioning the code. Once partitioned the code will not run as an on click event either using built in module capability or using parcel-bundler.
please advise
Yo gary where is the photo? Can't see it in the description!
When building with parcel, I check the built "index.html" with Live Server and the CSS file is unlinked.
If I go in and edit the 'src="/style.css"' and add a period before like this 'src="./style.css" then it works. How to I build the app to link properly?
I used that for a little project, but Why If I select multiple entry point in .php files it doesn't compile scss en js? in /dist directory I have just the php files... I want to use php files!
Webpack with Webpacker (with Rails 5)
VS webpack how does it scale?
I get an error when trying to run "npm run dev" using "src" in the package.json file, it works when i remove "src", anyone know why? 😅
sir please check your soundline it's bit faster then video itself in the middle
First ever trying to bundle my code
It will work for Vue file components??
is it possible to use parcel and socket.io ?
is there a download for this tutorual?
How to maintain subfolder structure for images...
I'm using like below but its getting from src folder
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
type: 'asset/resource',
generator: {
filename: '[path][name].[ext]?[hash]',
},
},
src
--globalassets
--home
--banners
--footer
--partners
--news
I getting like this. I don't want the src folder
anyone got a fixed on parcel + bootstrap/jqeury?
why back ticks?
Really surprised you didn't mention one of the best features which is Parcel's extensive tree-shaking.
Parcel is making me rip my hair out.... I started using Netlify yesterday and I wanted to deploy one of my projects and It's saying that the page is not found... Like at all!
I am new to this, so don't judge me when I ask is it possible to bundle all JS files in one single file ? By that I mean jquery.js bootstrap.js and maybe some jquerry plugins as well ?
Yes, it is possible. That's exactly what JavaScript module bundlers do. The most popular module bundlers at the moment are Webpack and Parcel.
Very nice consept man, Thank u ! I have one problem. Everything run true my project but when I write npm run dev or npm run prod terminal give me error and not working. Please help me (It is not specified what the error is. it just says there is a new error)
Got the same problem, something in this is wrong
"scripts": {
"dev": "parcel src/index.html"
"prod": "parcel build src/index.html"
},
Got it to work missed placing this "," behind "dev": "parcel src/index.html"
I use FuseBox
Hi mate, I follow your steps, when I run npm run dev it shows Export 'bro' is not defined any ideas?
found it,its export const bro = (greeting) => {
return `${greeting}, bro`
}
any idea why when I try to use parcel I get this output: prnt.sc/uujab4 ? its driving me crazy. I even tried to hard code the same version your using in the video and it just won't work right for me. been fighting with this for hours and can't find anything about why its doing this
Of cource ParcelJS
i still dont understand what packaging is? Why do i need to use parcel or webpack?
I'm still a beginner so I am not very sure either but I ended up here after experiencing problems while trying to use packages in my JavaScript code. Package is code that you borrow from someone else to use for your self, so that instead of having to write everything on scratch you can get this done faster using other people's code, for example there is one package that creates a square box at the top right side of your screen and you can use made up methods from the package to add variables in that box, from that box then you can change the values of the variables you have added inside and see stuff change without having to do this yourself and refresh the page, this package is very cool when creating stuff like animations in canvas. You could make that variable changer on your own, but to speed up things, since someone else has already made it for you then why not install the package? From what I understand one reason to use parcel or webpack is because import isn't very well supported in browsers, and a bundler like parcel bundles all your files and fixes those problems somehow. To better understand this tutorial I recommend you learn some basic terminal commands, then learn how to use NPM, search for NPM tutoriald and there is one really cool tutorial about 40 minutes video that explains everything you need to know, you will find it on top videos if you search fo NPM tutorials. After you have done that try to install packages and use them in your code and run it on browser to see if they work, they most likely won't, since if you want to use them with the require() method you will need to bundle your JavaScript files with Browsify or if you want to use ES6 import then you will need to use parcel or webpack.
so my terminal says running at localhost:1234 just like yours, but typing that into my chrome URL box says this site can't be reached, refused to connect.
it's cuz I'm on a Chromebook, and had to use the IP address instead of localhost.
For any newbies having the same issue but don't know what he means by IP address, it's this:
127.0.0.1:1234/
Having an issue:
How to use multiple pages with parcel?
Every time I go to ex: about.html its fine but when I go back to index.html then there's an issue. Here is the error:
about.js:1 Uncaught SyntaxError: Unexpected token <
script.7c337ef3.js:39 Uncaught (in promise) Error: Cannot find module '../node_modules/parcel-bundler/src/builtins/css-loader.js'
at newRequire (script.7c337ef3.js:39)
at newRequire (script.7c337ef3.js:23)
at localRequire (script.7c337ef3.js:55)
at Object.parcelRequire.styles/index.scss../..\images\2ndpaper.jpg (script.7c337ef3.js:110)
at newRequire (script.7c337ef3.js:49)
at localRequire (script.7c337ef3.js:55)
at Object.parcelRequire.script/index.js.../styles/index.scss (index.js:1)
at newRequire (script.7c337ef3.js:49)
at localRequire (script.7c337ef3.js:55)
at index.js:16
newRequire @ script.7c337ef3.js:39
newRequire @ script.7c337ef3.js:23
localRequire @ script.7c337ef3.js:55
parcelRequire.styles/index.scss../..\images\2ndpaper.jpg @ script.7c337ef3.js:110
newRequire @ script.7c337ef3.js:49
localRequire @ script.7c337ef3.js:55
parcelRequire.script/index.js.../styles/index.scss @ index.js:1
newRequire @ script.7c337ef3.js:49
localRequire @ script.7c337ef3.js:55
(anonymous) @ index.js:16
Promise.then (async)
parcelRequire.0 @ index.js:16
newRequire @ script.7c337ef3.js:49
(anonymous) @ script.7c337ef3.js:81
(anonymous) @ script.7c337ef3.js:107
Here is the scripts from package.json:
"scripts": {
"dev": "parcel src/*.html",
"build": "parcel build src/*.html --out-dir prod"
}
Here is the index.js:
import "../styles/index.scss";
import "../images/2ndpaper.jpg";
import "../images/landing-arch.png";
import "../about.html";
What is wrong in the code?
Thank you.
well, the index.html of dist folder broke when i opened it without server. I donot understand use of this except size reduction.. but wait even after reducing size it didnot work (broken html page).. Now even with live Server things remain broke.
I'm new to parcel and i need some help here: I have some external JS libraries that I used in my website development. So how do I include all those in my build? Note: I've used all CDN URLS like this
getting this error when running npm run dev.... /usr/local/lib/node_modules/parcel-bundler/src/builtins/css-loader.js: Invalid Version: undefined
I have the same problem :/
@@santiagovasquez938 The solution of this problem was to revert back to version 1.12.3, or by updating to the version 2 of Parcel. You can do the first solution by: npm uninstall parcel-bundler
npm i --save-dev parcel-bundler@1.12.3
why is your voice not matching your mouth movements in the video?
I fuck*&g hate webpack. Parcel is a New hope
don't add css/scss to your js when using parcle its bad practice to import those files where they are not needed. Leave it in the index.html where it makes more sense
webpack
Webpack, only because it comes with create-react-app xD
Don't drink the kool aid.
I've seen, and written dumber functions I feel cheated.
easy xD in no way
Webpack..
only lumpins do web dev on windows. Develop class consciousness, Eliminate class. Purely function Javascript is the only way forward