In the last section, we created a new project and then created
two separate JavaScript files inside of it; index.js and sum.js.
Now, before we start adding any code to these files,
I want to remind you that this is really a course about Webpack,
not necessarily about building fancy JavaScript applications.
So the amount of logic that we're going to stuff into
both these files is going to be, like, very compact,
really small just because we are mostly
focused on the Webpack side of things. Okay? So just reminder there.
Anyway, let's keep going.
Let's explore the purpose of both the files that we've just created.
So I've got a little bit of a diagram here.
The first file we're going to be working with is called sum.js.
And we're going to say that this file is going to have
a utility function or some utility functions for working with mathematical calculation.
So you know, just like probably at the end of the day,
a function that adds two numbers together.
Again, you know, we're focused on the Webpack side of things here.
So we're just gonna have some amount of arbitrary code inside of sum.js.
Index.js, on the other hand,
is going to call some number of functions from - let me fix that name - sum.js
and then console.log or otherwise print the result.
So let's take a second to kind of picture the dependencies between these two files;
like which file depends on the other to run?
Well, I would probably say that because
the index file makes use of some amount of code that the sum file has,
we can consider the index file to depend upon the sum file.
So we can say sum file is required to be loaded before the index.js file can be executed.
We might also say that the index file needs to import or require the sum file.
Let's keep that terminology - import and
require - let's keep that terminology in mind, by the way.
Okay. So let's work on the sum file,
let's put together some of the actual logic inside of it.
So I'm gonna open up my code editor,
I'm going to make sure I'm inside of the sum.js file and inside of here,
let's write a function that's just going to take two numbers and return the sum of them.
So I'll make a function called - let's dial up
the font size - sum and we'll say that's going to take two arguments,
a and b and then add them together like so.
Now note that throughout this entire course,
we are going to be making use of ES2015 code,
so you're going to see a lot of const,
a lot of error functions and great stuff like that.
So now that we have declared a function this file,
we will want to somehow call it or somehow get access to it from the index file.
So this is where things start to get really interesting.
In the world of JavaScript modules,
each module - or each file that we create - has its own separate scope.
That is, code that we want to add or access inside of one file,
like - as we've done right here,
is not inherently accessible from any other file.
So I can't just flip over to index.js and call sum(1,2);
I can't do that.
It is not in the same scope as index.js over here.
So to somehow get access to that sum function,
we must form an explicit link between index.js and sum.js.
So to form this explicit link between the two,
we're going to have to learn a little bit more about how
JavaScript modules behave and the rules governing them.
So believe it or not,
the JavaScript world has
several different rule sets for determining how JavaScript modules behave.
And in this course alone,
we're going to be having
a very in-depth discussion about two of these different rule sets.
So again, different rule sets for determining how JavaScript modules behave.
Depending on the environment you're working in,
like say whether or not you're working with no js or you're working in the browser,
you might have to use a different module system just to link
these different modules or these different files
together and share some code between them.
So if this sounds confusing or a little bit overly complicated - yeah, it kind of is.
The differing module systems in the world of JavaScript are
certainly a rough spot for many people and it's definitely a sore spot in the community.
So let's take a little bit of time to look at some of the module systems that are in use.
Okay. Here we go.
So this is just three of the several different module systems that are out there.
Again, you know, this is just a slice of
the possible ones and not necessarily an exhaustive list.
So first, let me remind you that these module systems are the rules and the syntax that
we're going to use to somehow link together our sum and index files.
Three of the more common systems that you'll see in the
wild - like in industry - are inside this diagram right here;
CommonJS, AMD and ES2015 modules.
So let's talk a little bit about each of them.
CommonJS is the module system that is implemented by node js.
So whenever you write node js code or code that
is executed essentially outside of the browser,
chances are that you're using the CommonJS module system.
You can recognize the use of CommonJS by
the syntax that is used to exchange code between the different files.
So in particular, you're going to want to be looking for
require statements - require statements and module.exports statements.
The next module system that's in existence is AMD,
which is an acronym for asynchronous module definition.
AMD is more commonly used in front-end applications,
where different modules of code can be loaded up asynchronously.
And that's something that we'll talk about in great detail later on.
You can recognize the use of AMD by looking - or by seeing
keywords like define and require.
Finally, the ES2015 module spec.
So this is the direction where a lot of JavaScript is headed towards,
especially in the module world.
With ES 2015 spec,
they - the developers of ES2015 have kind of taken their own
take on how JavaScript modules should be implemented and how they should behave.
So you can recognize this module system by looking for
words like export and import statements.
Now certainly again, modern web development is really headed towards ES2015 code.
In the short term - so for this first project we're going to work on,
we're going to put everything together using CommonJS.
And then over time,
in just a little bit after that,
we're going to migrate our code base to using ES2015 as well.
So we're going to get a really good comparison on the differences
between the CommonJS world and the ES2015 world.
And we will also figure out, kind of like in a little bit,
what is required to make use of ES2015 modules today,
like in the modern world.
Okay. So that's it.
A lot of modules right now.
Let's continue in the next section and figure out how to link together our two files,
sum.js and index.js, by using this CommonJS module system.