ES Module Syntax

[00:00:00]
>> Sean Larkin: And so now we can actually just continue to add modules to our graph here. We're creating this graph of relationships between what is used in your app and what is actually compiled. So let's create, what's it good? So we get a nav. What do we have, we could say footer.

[00:00:17]
Let me say, footer.js, all right? Okay. And we can start out simple again, but let's just say our footer is gonna have two parts, a top and a bottom. And for now we can just use top and bottom as strings.
>> Sean Larkin: And so you can't really default export multiple values like this.

[00:00:47]
I mean sure you could put it in an object, but that doesn't drill me too much. What if I only wanna reuse the top part of the footer? Like that doesn't seem likely, but then we've all come across that scenario when you're like, I don't need to really encapsulate these two.

[00:01:07]
And then you end up pulling it out anyway. So we have these two pieces. And so we wanna provide both of them individually to other files, right? So,
>> Sean Larkin: There's two ways that you can define this. The syntax is really flexible. So since this is already an expression right here, you could one, my gosh, I could learn to type.

[00:01:29]
Export in front of them both, okay? So that's cool. So go ahead and add export to the front of them, the expressions.
>> Sean Larkin: Now you'll notice, Webpack didn't rebuild, right, because we haven't added anything to the graph. It's not connected to our entry point.
>> Sean Larkin: So we want to actually access this behavior.

[00:01:57]
So the syntax is just slightly different, now we can use this object destructuring syntax, and pull in. And you'll even see, actually if you just have an empty object there, and you'll like from, and then you'll provide like, let's say the path when you go back, so webpack actually consumes it that time.

[00:02:19]
And you'll see a rebuild, and you'll actually see footer there. But if you're using DS code, you'll actually get the names of the exports that are there. That's super valuable. I know the Angular community was super huge on showing people that because Angular basically super re-exports from a billion packages into a top level.

[00:02:44]
So, it's like you have a billion things that you could choose to pull from a single package. That's kind of the same thing with Lodash, right? So, awesome. Now we probably want to, like, log it also. So cool. Top, bottom, great. We'll cancel our watch mode. You know I use Ctrl+C on here.

[00:03:06]
And so we'll just, npm run prod.
>> Sean Larkin: Great.
>> Sean Larkin: So now, and you can always see in the feedback that we generate, at least I think we stop at 20 modules or something like that. You can see a very clear graph of here's your entry point.
>> Sean Larkin: It has a dependency on index.js, which is your entry point itself.

[00:03:37]
And it depends on nav.js and footer. And so you're kind of seeing there's a graph that's being built here, and we call this the dependency graph in webpack. So if we go and just run this code in Node again, like the same script, we can run so like, node ./dist/main.js.

[00:04:00]
There we go. We get all the strings there, right?
>> Sean Larkin: And so I do wanna talk about like, how do you write to clear the browser code in modules? One of the things that early on at first like I kinda struggle with because it's like, in modules, you don't want to have side effects, right?

[00:04:19]
You want to have everything that's, anything that you access from another file should just be through exports or a default export. Instead of just, like, running a script and evaluating what kind of things are happening inside of it. And so we're gonna slowly maybe transition this over to something that is a nav element that we're gonna attach to the dom, and then we'll have a dev server that we'll spin up.