You can skip that step. But, again, likely for production, you will want that compile step to make sure that it works in IE 9 and browsers like that. Anyways, if I were to get rid of TaskCollection and we put it back in the separate file, and then we export it, okay, and then we import it here, import TaskCollection from TaskCollection, well, as we've already learned, if I switch back to the browser, this is not going to work. And that's because while, yes, Chrome Canary and Safari, they support a lot of the ES2015 syntax, none of them yet support modules. So that's our problem.

The output is incredibly clean, more clean than just about any other bundler I've seen in the wild. So take a look at this. We have a main.js file that imports a single function from maths.js. So we're just grabbing this right here, and then we log it. Now you'll see that if we compile it down, this is what you would get. Now what's cool about this? Well, two things right off the bat. One, because it compiles down to a single file, that issue of modules and loading them asynchronously or just the simple fact that browsers can't do it right now, that instantly

Local is fine. All right, so now you should have a rollup executable, just as long as you have that included in your path. Or like I said, if you want to install it locally, just like this, then you'll find it within your node_modules, then rollup directory. Okay, cool. So what's the next step? Well we can call rollup, but we got to give it a source directory or an entry path, and we also have to give it an output. So let's try this.

we also have to give it an output. So let's try this. Let's say, well what's our path? We want source/main.js. Okay, rollup, source/main.js, and if I just run that as it is, it's going to do its thing. It's going to compile it down, and by default, it'll spit it out in the console. But of course in our case, we want to save it to a different file. So let's run it again, but output it to source/main.dist.js. Okay, well now you'll see we have a new file, and take a look. We've bundled up all those modules.

Okay, well now you'll see we have a new file, and take a look. We've bundled up all those modules. So when you hear that term, module bundler, that's literally what it's doing. It's taking all the modules and bundling them up into a single file that the browser can understand. So now let's go back to index.html, reference our compiled file, and if I go back to Chrome and give this a refresh, it works exactly the way it did before. Very cool. But now here's a really important thing to understand, and from my experiences, it's where people get very confused.

But now here's a really important thing to understand, and from my experiences, it's where people get very confused. Okay, so we executed rollup on this file. It read all the dependencies and loaded them and bundled them into this file. But now notice it still has the class syntax, and that represents modern ES6 features that all browsers do not understand. That's the thing that you have to understand. Rollup is a module bundler. It's not, however, it's not an ES6 to ES5 compiler. So it's not going to take your class syntax here and convert that into a single function

and overall generally easier to use, in my opinion. But either one would work just fine. So let's see how that would play into things. We can go to Booble.search.sh. It'll give you an example of the input and the output and how you would use it. But if I go to npm, I want to use it with Rollup. So maybe we can just look for Rollup, and you can see there are plugins here. So let's look for Booble. Ah, there it is. Anyways, it looks like we installed the plugin, and then when we trigger Rollup, we can just

Ah, there it is. Anyways, it looks like we installed the plugin, and then when we trigger Rollup, we can just add a reference to Booble as a plugin. Okay, let's do it. Install it. Save it to our dev dependencies list. There we go. And now let's reference this from a single configuration file. So we can create Rollup.config.js. And think of this just like any other configuration file, whether it's for phpunit or webpack.

So we can create Rollup.config.js. And think of this just like any other configuration file, whether it's for phpunit or webpack if you're familiar with that. Same thing. All right, so let's set our entry point. So this means now, rather than doing something like this, I could just say rollup and use the items in my config file. Nice and clean. All right, the entry point will be source/main.js. And now I do want to use that babel plugin.

All right, the entry point will be src/main.js. And now I do want to use that Booble plugin. So I'm going to reference that and then import it at the top. Import Booble from, and we can reference the exact module that we installed. rollup-plugin-booble. And by the way, if you do want to use Babel, no problem there. There's also a rollup-plugin-babel. Okay, this looks good. So let's try it out. rollup.

Save it to, once again, src/main.dist.js. And if we now come back to Chrome, it's still going to work the way it did before, but now it's going to work in any modern browser.