[00:00:00]

>> So just to walk you through the solution, so the very first thing that we first
have to do is create another file called math.js, change everything or move
everything here, export them because we want to use them in our index.js file. So
we need to explicitly at the export keyword to make them public or at least
available in other modules, import them, sum, subtract, divide, multiply, from
math.js.

[00:00:29]
And then, the last step that I always forget type module, or we could have used the
MJS extension, so now with this, we can use it. So now, it's also easier to show
you that if we added a secret value here, cause secret equals a or 123, that's fine
too.

[00:00:47]
And we wanted to import that, it will throw an error. Because the requested module
doesn't provide that named exports secret. So this is a really good way to keep
secret encapsulated to just that module cuz the function inside it can, of course,
use secret. We can have a function that returns secret from the module that would
then expose it, but we cannot just import anything that hasn't been exported.

[00:01:13]

>> So if the browser supports ESX modules by adding the type module attribute, why
do we need to use module bundlers for bundling our dependencies in one or multiple
files?
>> Well, the fact that it's a module doesn't mean that it contains all the files
that we use.

[00:01:30]
So normally with like a module bundler, what they also do is they make sure that if
we're requesting another module maybe, a node module which is also a great thing
that we could use now, as they're all within that one file all bundled within that
file that we request.

[00:01:46]
If we wanted to import say, a note module and we're just using that in the script
maybe I can show you. I'll just go back to, I guess here. I guess I didn't save the
solution, but if actually, I'll probably do this one because this one had the HTML.

[00:02:09]
We can of course say that okay, index.js is of type module, and in here it is nice
because we're importing math.js. But if we wanted to import, say a node module that
was, I don't know, in our package, or we added import. Okay, I don't have any node
modules here, but I don't know calendar from calendar somehow, we have like a
calendar node module.

[00:02:31]
By default, the browser doesn't know what calendar is, it doesn't know what to
fetch from, so normally a bundler make sure that it goes through all the imports,
make sure that it bundles them, it gets that code that we're using, funnels them
into that one bundle. We'll also cover this later, by the way, how bundlers work,
and how we can use them with modules.

[00:02:48]
But yeah, so a bundler just make sure that everything is available to the browser
when it's actually being requested.