Check out a free preview of the full Complete Intro to React, v7 course:
The "Bundlers Overview" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses the function of bundlers as tools developers used to bundle modules into a single file that can be executed in the browser.

Get Unlimited Access Now

Transcript from the "Bundlers Overview" Lesson

[00:00:00]
>> Let's start with, what is a bundler? If you look at this page right now, I'm just viewing source on the the page that you and I just created here, right? It's creating this file here index.9e7b1db9.js. As you and I both know, we didn't write that, we wrote app.js, right?

[00:00:30] Well, how did we get from here to this, right? And if you look at this, That's actually fairly simple, right? It's actually not even really doing very much transformation for us. I guess the only thing that it is doing at the moment is that it's doing render here, down here, right?

[00:00:48] And it moved it down from there, which is kind of funny. So, how is that happening? I guess I need to refresh the page here. Yes, this is actually not running. So if I do this again npm run dev, this actually will be much bigger. Sorry, to interrupt my site on what bundlers are, we do have to do one thing here on line 14 this is new for Parcel too, put type equals module.

[00:01:33] Cuz we're using ES6 modules, right? And so you have to inform Parcel to kick into module mode instead of CommonJS which is like const react equals require react that that style of module is called CommonJS. So once you do that then Parcel will be like okay I get it now, now if I refresh this page, and I open this, you'll notice that this hash changed as well.

[00:01:58] Now this got significantly longer look how long this is, that's absurd, right? Why? Why is it so long? Okay, so going backwards now. Your browser doesn't understand, A lot of the JavaScript that modern JavaScript developers use. So for example, Please don't be pedantic back at me after I'm pedantic to you, your browser doesn't really understand how to did this ES6 imports, it kind of does actually now but we're not using it in that particular way.

[00:02:36] The way we have written it would not understand, let's go with that. And so we need some tool to take all of our JavaScript files, including all the stuff that we install from the node modules directory, and put into a big glob of JavaScript and ship it down to something that a browser can understand.

[00:02:51] Particularly if you are supporting older browsers, right? If you are still supporting, Internet Explorer11, one, I am deeply sorry, and two, you need something that's going to package it in such a way that those browsers can understand. Another thing is, we're doing things here like arrow functions, right?

[00:03:07] Internet Explorer does not understand arrow functions, right? So something has to take that new style of JavaScript and translate it into an old style of JavaScript This is what your Parcel or Webpack or Vitet or ES build or Snowpack or Browserify or rollup I can keep going. So, no one wants me to keep going though.

[00:03:32] Anyway, there's a lot of JavaScript bundlers out there. That's what these are doing for you, they're taking this input of code that you want, and then it's repackaging in such a way that it's generally applicable to the browsers that you're targeting. Now I'm simplifying basically something like Parcel is the tip of the spear in the sense of it's not doing that all inside a Parcel itself.

[00:03:54] It's using tools like Babel and PostCSS and the TypeScript compiler, and a myriad of as you can see here, we installed 186 packages. It's using all 186 of those open source tools to pull together into one cohesive package which is Parcel. And then we're gonna start using non standard JavaScript syntax when we start using JSX.

[00:04:20] Browsers definitely don't speak JSX. So you need something to translate that from code that I'm writing to code that browsers can understand. I probably could have just said that and ended it there, but here we are. Why are we not using create-react-app? Or what is create-react-app? Let's start with why we're not using create-react-app.

[00:04:41] Basically what I was telling you at the beginning of the course, that I hated that most JavaScript tutorials start with, draw the circle, then draw the rest of the owl. That's what create-react-app does for you, it drops you into the middle of a project. It's very disorienting if you don't know where you are and just say cool, you have now a fully functional development environment, go forth and create React apps.

[00:05:04] And you're like, how? Where am I? How did I get here? Who took my keys, right? You start asking questions like that. Create-react-app is great, if I have to knock out something in ten minutes and I wanna just prototype really quick. Actually these days they probably still will use Parcel, cuz it's almost as fast, right?

[00:05:22] But you can just say npm init React app, and you'll just get like a brand new React app ready to go, right? It'll have TypeScript, it'll have testing, it'll have a bunch of stuff like that, it's solid technology. But that's why we're not using create-react-app because I didn't want you to start with a functioning development environment.

[00:05:44] I wanted you to start writing code, start to feel the pain of why we do something that way and then I want you to know the tool to solve the pain that we experience. So that's what create-react-app is. That's why we're not using it, question.
>> Not sure maybe I heard you wrong, I think you said npm, it's npx right?

[00:06:02] Create-react-app.
>> So I guess it doesn't work anymore. So there used to be a way to init, projects called npm init and it looks like create-react-app stopped supporting that. So you have to do, to your point, npx create, you can see there I used it to create next step, create-react-app test app.

[00:06:26] So it will go through and just set up everything for you. And to his point, most of it's optional, but again, you kind of have to, you're starting at step 14 and you're wondering how you got there. By the time that you're done with this project you'll understand every single file and why it is there and more than anything you don't have to follow my way of writing code don't for that matter, right?

[00:06:53] And I want you to understand the tool, understand what it does, and then I want you to make a conscious decision. This adds to my experience of this does not add to my experience and then go forth and with your opinion on it. So if we look here into test app You can see here it's got a bunch of stuff in it.

[00:07:16] It comes with tests and who writes tests? [LAUGH] It's got a robots.txt, stuff like that, manifest.json, ain't nobody use that, just kidding. You should probably use it, it's a good idea. Look at that, comments, now they're joking with me, no one writes comments. I remember I got in a very serious discussion with Jim Young and other fantastic Frontend Masters teacher about how much you should comment your code, and at the time I was very wrong, Jim was right.

[00:07:50] Jim was saying that you should comment, well, Jim writes a lot of comments. I think he was some time on that. I feel like I've just started like four fights with other Frontend Masters teachers during the course of this course. It's fine, they're not here, they can't argue back