Module Pattern Solution

[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.