Let's move on to a big problem number three.
Let's remember, we want to allow users to write our import statements for JavaScript files and somehow
import them directly off of NPM.
We also want our users to write out access import statements as well.
This is going to be a rather challenging thing to solve.
So we're going to spend a couple of videos getting a lot of background into import statements, JavaScript
modules and stuff like that, and eventually come up with some kind of possible solution.
They're going to first begin with a very quick review on the topic of JavaScript modules.
We're going to understand what JavaScript modules are.
So a module is a file that makes some number of values available to other files inside of our project
and or consumes values from other files.
So very quick example.
In this example, I've got two files.
Message and index messages is a JavaScript module.
It declares a value, in this case a string of hello there and then exports it so that value can be
used by other files inside of my project.
The second module index is consuming or importing a value from another file in this case message, it
imports that value and then councillor's it.
So in this case, I've got one file that is exporting a value, another file that is importing or consuming
a value.
So a module can import and or export values.
Now, there are many different kinds of model systems out there in the world right now, these different
model systems describe different ways of kind of joining together or different ways of declaring which
values we want to share between different files.
Some different model systems are the AMD model system common and s model system.
There are several other model systems as well, but they're not super important for us right now.
The two model systems that were going to focus on inside this course are common, commonplace and its
modules, you can always kind of identify what module system you are using in a given project by taking
a look at how you either import or get access to values from other files or make values available inside
of one file to another one.
So if you ever see a file with stuff like require or module exports, chances are you're using the common
gas module system.
If you ever see a file with stuff like import or export, then chances are you're using its modules.
There is one little caveat to that.
However, it turns out that a lot of transpires out there, namely Babul.
If you feed in something that has import or export statements inside of it, it might automatically
convert those into the equivalent common Syntex.
So if we fed in something like this to Babul, we would get out something that would work with --'s.
We can validate that or check that really quickly.
If we go back over to that Batbold website, Zoback over here.
If I write out something like say.
Import react from react.
You'll notice that although there is a decent amount of code that gets printed out here, there definitely
is a require statement.
So that is kind of a sign or kind of some indication that we're making use of --'s if I put in
something like export default.
One, two, three.
I'm going to see experts right there, vaguely similar to that model experts thing we saw just a moment
ago.
So even though you might think that you're making use of the model system, well, it turns out you
might actually be making use of common G.S. just want to that out there really quickly.
Now, at some point time, once we have all these different module files put together inside of our
project, we need to actually run our code when we want to run our code.
That means that we want to somehow actually exchange values between these different files.
For that, the most popular solution is to use something called a bundler.
So bundler.
Very popular example of one would be Webberley.
Although there are other bundler implementations out there, these bundlers are generally going to take
multiple different modules and combine them all together and somehow link them into one single file.
This bundler will also be responsible for making sure that these different values that are declared
instead of one module actually get communicated over to the other module.
OK, so we can take a quick pause right here.
When we come back, the next video, we're going to start to install Web back onto our local machines
and play around with it a little bit.
We're going to try bundling some very small files and see what Watpac actually does during this bundling
process.
This might seem like it's very off topic, but this course.
But trust me, all this knowledge is super critical for understanding how we're going to eventually
solve problem number three down here.
Let's take a look at Westpac in the next video.