one, but this one later may depend upon a different script. And at all times, you have to maintain the order of things in your head. It just kind of sucks, to be frank. So people have been trying to solve this for many years. And the solution they came up with is this module format that we're going to talk about. So now, rather than doing it in this way, instead, we will define modules, we will export behavior, and then we will import that behavior anywhere that's necessary. So I'm going to get rid of that entirely. And within TaskCollection, well, in the last lesson, you learned about classes. So why don't we just create one right here, TaskCollection.

And within TaskCollection, well, in the last lesson, you learned about classes. So why don't we just create one right here, TaskCollection. And the constructor will be, give me an array of tasks, and then I will assign them here. And then finally, maybe we'll have some kind of dump method here that simply dumps all of the tasks to the console. Okay, good enough. So I've created this TaskCollection, but now, yeah, I don't want this to be in the global space. I want to export or expose this behavior outside of this file. Now, like I said, in the past, people have been trying to solve this for a long time.

don't want to, only if you're curious. So how does it work? I have this file, but now I just want to expose or export functionality. We'll take a look at this. Export. Done. That's all there is to it. Create the file, add any behavior you want, and then anything you want to expose to the outside world, meaning anything outside of this file, you just prefix the keyword export. Now let's see if we can import this from our main.js file.

So here, we export. From another file, we import. So import taskCollection from the given file. Okay, but in fact, we can clean this up even a bit more, but we'll get to that. So now that I've imported it, why don't we just new up the taskCollection, give it some dummy tasks, and then dump it to the console. Okay. New taskCollection. Give it some tasks here. Go to the store, finish screencast, and eat cake.

Give it some tasks here. Go to the store, finish screencast, and eat cake. All right. We have our collection. Now let's call dump. And it looks good to us, but we do have one problem. If we go to index.html, I'm just importing that main.js file. And up until now, because the browsers are making so much progress with ES2015, we've been able to get away with it, at least in the latest versions, without having to use Babel.

There's really a number of tools at this point. And we're going to talk about that in the next lesson. So for now, I'm just going to use a tool called Rollup. Don't even worry about it. Just come along for the ride, and then we'll talk more about module bundlers in the next video. Anyways, you can see that I have compiled this down. So let's update this to out.main.js. And if I switch back to Chrome and give it a refresh, there we go. We now have our array of tasks.

add as many things as you wanted here. That's how we got around to that in the past. But with ES6 modules, yeah, you can export as much as you want. So up here, we're exporting a class. Down here, we could export a variable. Maybe another one we could export some kind of function. Now the key thing to understand here is the value that you're exporting is what you would import. So for example, if I want to import taskCollection, but also, let's get rid of this, but also this value foo, then I would say import taskCollection, foo.

So for example, if I want to import taskCollection, but also, let's get rid of this, but also this value foo, then I would say import taskCollection foo. All right, let's console.log foo. And if we did it right, that value should be equal to bar. Okay, compile it down, switch back to Chrome, give it a refresh, and there you go. So that's what I mean when I say you can export multiple values and pieces of data from a module. But the truth is that a lot of the time, you're really just exporting one thing. So in those situations, we can also add this keyword, default. So the default thing I'm exporting from this module is the taskCollection class.

So in those situations, we can also add this keyword, default. So the default thing I'm exporting from this module is the task collection class. Now when we do that, we can clean this up. So it's kind of optimized for default exports. I can remove the curly braces and just do this. And now, once again, we'll still get the exact same thing, which I'll show you. Refresh, and there you go. So now, that does beg the question, does this mean that if you have a default export, you can never have anything else exported from the file? No, that's totally not the case.

and there you go. But yeah, like I said, one more time to reiterate, I think you'll find more often than not, you're just going to export a single thing, in which case, you'll often see me at Lericast do things like this. export default, and then I just import it at the top, wherever I need it. Now, if you don't like this long line there, you can always export it later as a reference. So for example, you have your value or your data at the top, and then at the bottom is where you define what gets exported. That can be a nice clean way to go. So you can say export default, taskCollection, and that's still going to work just as before.

All right, so now, at the conclusion of this video, we've learned more or less the basics. You've learned how to create a module, which is just a file. It's just a file that exposes or exports behavior. Something like this. Next, you learned how to import that behavior, either by using this syntax or by using this syntax here. Or, once again, we learned that you can combine them if it makes sense. So now, I think we should take some time and talk a little bit more about module bundlers themselves. You can see I'm using Rollup.