Welcome back, ladies and gentlemen, this lecture will be about the best configuration, so this couple
of lectures, we are all going to do the configuration we need to start writing the modules right now.
This lecture is going to be not that probably long, but I will I hope that I'm going to manage to do
it in less than 15 minutes now, which is a common used acid bundler.
Right.
This doesn't mean that it's only for genius.
You can see on the left side you have Geass, SAS.
We have bags, images.
So this is the bundler that can put together multiple files into one.
So what we have on the left side, it will be bundled up into a one file.
Right.
This is about how we write the code here.
You're going to use some of this here and yeah, we're going to use this output, but we're going to
write this manually, by the way.
Right.
Don't worry about this.
And by the end of the this lecture, when you go back to these Web Bega's, Doug, you will understand
what we have done.
No.
So this is the first thing that you need to understand.
Open this web back.
That changed at all and you can read more about it.
Now, the documentation is here.
And also what I want to see that sometimes from time to time the things are changed.
Maybe that the moment I'm recording this is the website documentation have a couple of things.
After that, it can add multiple things and stuff like that.
Right.
So we need to you need as a developers to start reading from here a little bit so I can just grab copy
and paste here.
But that is not what we are going to do now.
The first things first is that we need to open up our our file.
Right.
The MAPI starter.
And also I have here I have open it in the terminal.
So for our project we will bundle the modules into one single file called Bundle JS and that file will
go in this distribution folder here, right in our starting entry file will be our source.
G is indexed.
This will be the entry file we're going to use here now for small projects, you don't need a configuration,
but for the projects that are big, you need a configuration of Watpac.
So our project is not that huge.
But still, I want to show you how this is done.
Now let's create one file called Wetback Config that and we going to create here outside.
So.
Right.
So you can even create from the terminal.
But I'm going to just do it here, web back the web, that dot com fix sorry that J is now I have icons.
I come in here install.
That's why these visual studio will recognize.
Right.
Will recognize these as a [REMOVED] file essentially is a J JavaScript file.
OK, now so this is because I have these icons so you can install different themes and you can have
something similar.
Now this is a regular Geass file and this will be our configuration file.
So inside we need to write one object and we will export this object using no J syntax.
Now, you don't have to worry about this syntax.
So I'm going to say module here that exports that will be equal to the object that I want to export.
Make sure that you close this object here and like that now here.
So we going to export this object right here.
And we're going to write a couple of things here now in the content cobwebbed.
There are four main concepts that you need to know.
So the first is that there is an entry point.
The second thing is that there is an output point and the third is loaders and the fourth is plugins.
So we have four main concepts here now in this lecture.
Are we going to go through the entry point and output point?
Now, let's start with the entry point.
The entry point is where Webcke will start bundling process in our entry point, as I told you, will
be in the source.
G is actually this global app controller that we have here.
This will be our global app controller and this will be will need to be specified here.
Now, this is the file that webpage will look into and find the dependency to bundle into the one file
in everything here.
We were going to put it will bundle until this in this directory distribution and that will be our output
file.
OK.
Right now the entry point is in our source index.
So let's write it together.
So I'm going to start see entry here and I'm going to define Dot SIRC, then I'm going to just folder
then inside index is right now.
Why are you using these dot so one dot and slash means the current folder in this folder inside.
So if you take a look here, it will say dot slash and it will give me these current folders that I
have, distribution node and modules.
Right.
But there is also sometimes you don't need the current folder you need to go up from.
For example, you are inside here and you want to go up in the distribution folder.
So for that reason you need to see double dots and then slash.
Now this is going outside and is going to my desktop and it's looking for for something there.
But I don't want to include anything here.
So my entry point is, is again in the current folder source directory, that just folder and I after
that index Gere's so that is one dot and two dots.
It means that.
So now we define the entry point.
Now let's do the same thing for the output property.
So this output will tell Lepik where to bundle the output file in, where to store it.
Now we need to write output object and how are we going to do this?
So comma here and let's say output.
Oops.
And this will be an object, why?
Because he decided we're going to have a couple of things.
The first thing that we're going to have is called the file name in.
Let's just write the file name.
So the file name then I want to bundle all of these things is going to be bundled is in this file will
be created in the distribution folder.
But how the Reppert will know where to create this file.
For that reason we need to give.
So this bundle just is like a standard.
But you can give it any name you want.
It can be like I don't know def that J is.
But this is a bundle that jazz is like by default used by most of the developers now is a dorjee.
The [REMOVED] needs the path and so we need to define the path here on top.
Now the path I'm going to leave it for now empty because I need to explain you how we're going to get
the best.
Now for the bed.
We need to use the note package that will give us the absolute best that we need to include it.
And every time we include something, we're going to include on top here.
And so let's right here const path.
So don't worry about something of some of this if you don't understand.
So I'm going to say required here, equal to require.
So I'm going to require something and what will be that path.
So this is a no syntax.
So you don't want you don't worry, but everything you include make sure that you include on top.
Cuz now I required a path but now we need to include this back.
So how are we going to do this.
OK, inside here.
I'm just going to delete this because otherwise it will give us an error and I'm going to say path that
resolve next year with this method will take here.
Dear directory name double underscore directory needs.
So this directory variable is given from the note in this variable will hold the absolute best in the
resolved method is actually doing two things.
So I have the the directory name, but I want also to join the distribution folder where our from our
here this distribution folder.
So I want to join with this method and I'm going to say distribution.
So I want the bundle that G is to be stored dear.
Now if you have your other folder, like if you have just folder you can say, OK, slash is and it
will go from distribution folder into that Jesus and it will put this output there now cuz we are pretty
much done here.
OK, now.
Before doing anything else, I just want to make clear so what we have done, so we've cleared the entry
and the entry is our index file that's located in the Gere's.
And also we have defined the output in the output file is where this webpage will bundle all of the
files and it will put it in the output.
So that is pretty much what we have done.
We have to specify the bad in the back, going to hold the absolute best.
And this is directory name is going to be given us from the node directly.
Now to make this Watpac little bit simpler.
We need we have here two essential Moat's the first mode is called the production mode.
And the second mode is is called development mode in this modes modes.
Actually we can define it here.
We're going to see mode and we want to say development know now why we want to use this development.
OK, now the second mode that is development mode will create the output that it's usually without any
magnification right in it.
That is bigger and faster for us because we are in development more.
We don't want our program to find bundle just to to create a smaller Jarius Wright.
We just want do things to go faster.
Now in the production mode.
It's where the Bundle J is.
It's Minifie.
Right.
And you will see the difference later on.
Not this mode here.
I'm just going to remove it at the end of the lecture and I'm going to put it in the scripts because
I don't want to hear these mode to be here so we can just use it in the scripts and we're going to call
it from there.
Right now, as I told you, we use the development mode because we're going to change the code too often.
And we don't want this to be minified into this here, into this bundle just to be minified all the
time.
Right.
We don't want to spend resources and time for that.
OK, now we are done actually here.
What we need to do, we need to test to see if this is working.
Now on the entry files, we have the entry files in the output files, but we need first to create to
actually to write NPM script.
So in our scripts we want to call the Web back.
OK, so I'm done here.
I'm just going to go back at Jason and I'm going to modify this script.
Don't worry about it.
So I'm going to call it development here.
And from this script, I'm just going to call it that bad.
So what basically a simple word means this.
When I run this script through the AMPM here, write that script will call the web back and this will
go to the configuration file.
Any configuration file.
We do have the entry point and we'll say, OK, this is the entry point.
What we have here, everything do and then produce the output in the distribution folder that will actually
be done with this with this NPM scripts.
Now, you know why we use these NPM scripts, so you can see that MPM scripts are used to call the luckly
install dependencies here.
At the moment we do have Lepik only webpage, but we're going to install webpage, Kellye, just real
soon.
Right now, the scripts we're going to call this localist all dependency and we can launch them through
the terminal.
But in order to do that, we need to install another package called WebEx Kellye so we can access the
Web back from the command line interface right in how we were installing the dependencies.
Just simply go here and say NPM install web back dash.
I see that we got to see this one as a dependency and I'm going to leave it to run there.
And this package that Jason file here it is will be modified.
So now we do have these Web Bexhill as a dev, as a development dependency, meaning that we can use
it for only for this project only.
So that is pretty much what we have to do.
Now, let's test this out, OK?
Now, in the source in the Geass here, I do have this main controller here.
I'm going to create another file, another JavaScript file called module.
You can call it whatever you want, module dodgiest, because now I just want to bundle a couple of
modules in here.
What I'm going to do, I'm going to bundle means I'm going to put these two files together and I'm going
to bundle its result into these bundled.
That's why we use the Web.
It's a mumbler right now.
What we're going to write here, OK, in our files, let's console lock something.
So we're going to say console log.
And let's say this is this is coming from with one M, right.
This is coming from module, that JS file.
OK, now also what we can do here, we can say we can export default.
I'm going to explain this one later and I'm going to say this is awesome, OK?
And I'm going to put it exclamation mark there and I'm going to leave it space now here.
Explorer is for exporting things from a module more.
We're going to talk about this in future.
Right?
So we're going to use export.
So this is official ESX module Syntex, and we're going to talk a little bit of exporting things in
future.
Right.
This is how we export things and we can import those things in this index JS file.
So now in our control, we can use the key word import.
So this is your six module Syntex.
We haven't done modules before.
This is why I'm creating this course, this part of the course, because we're going to create we're
going to use these modules.
We're going to use this [REMOVED] label and everything.
We need to be professional developers.
No import in here.
We can see output.
We can just create any variable name.
This is a variable here.
I'm going to say out here from and now we need to specify, OK, from where the input will come from.
So I'm going to say in the current directory and I'm going to select the module.
But take a look here.
I don't use the module JS, right.
I just use module because the spec will know what we are trying to do now.
We don't have.
So remember, we don't have to specify the just now the out will be the variable that will hold.
So this variable will hold the output from this one here.
Right.
That's what we're trying to export.
Good.
And so what we're going to do here comes a lock.
We need to write this to the council and we're going to say, OK, and let's say this was imported.
From the module that J.S. file in, how we call it, we were calling, how we were bringing out what
we have in the variable just like this.
Right.
OK, now the whippet will bundle this together because what Peg is a Bandler?
And we just need to go back to the terminal.
We need to go back to the terminal.
We what we need to do is to type NPM run death in by the MP and run deve.
It will look in the package to Jason, it will go to the script in NPRM.
Dev will know that we have [REMOVED] and it will go to the weapon configuration file.
It will find the entry point.
The entry point is this and we are importing things from the module.
Right.
So we have two files now and what it should do, it should produce a bundle file here in the distribution
directory.
OK, save everything, save here everything.
He'd enter here and I expect that I'm going to see Bundle Dodgiest soon.
It is Bundle Dodgiest.
It's four point sixty two kilobytes and that is created.
Let's go back here in the distribution.
Here it is.
Now, if I open this one, you will say, wow, what is this?
So this is what Watpac does in the background, right?
You don't have to understand it, but here it is here.
Some of our code that we read we were reading is here now how we can see the output, actually the output.
We can see it.
What's happening here, OK, for some reason wasn't so here.
I need to create the index file.
OK, I'm just going to create HTML files.
Sorry, I'm going to create a result that html in because I have Emet installed here.
Actually it's coming straight out of the box for, for this text editor.
You can just create a sorry exclamation mark and hit that and that would increase, that will create
an HTML markup.
Now one things here, it's essential we need to call this bundle not just here in the body.
So SIRC.
So I was thinking that it will give me so I will say script, right, sirc so write script and it will
give you the entire path in here.
We need just called the bundle that J is right.
OK, now how remember how we use the terminal to open up this one.
Now we can go the seed back to the distribution folder.
So I'm actually here and I need to open this one.
So I think in was open that result that HTML like this result the HTML, but we don't have open here.
We need to say start in windows.
So start result not html.
So this cool, this will open up our this will open up our e-mail file and if we go inspect, if we
go to the console, look at the output.
This is coming from the module JS file.
This was imported from module JS file and this is awesome cuz now if we did have something else here,
like we can just export in the source in the index, we can just put it here whenever we want.
It can be a number, it can be float's, it can be anything, it can be boolean, trud can be streamed
like this so we can export pretty much a function sorry.
So we can export a couple of things.
And I was saying fifteen minutes but this is going too long.
Now one more thing that I want to show you there.
I'm just going to open this here.
I'm just going to remove this mode from here for development and I'm just going to include it here.
Right.
So I need to just modify a couple of things and I'm going to say [REMOVED] mode and I'm going to say development.
Now, this is for the development, but what if I want to have the final bill to be the production?
So here what we can do is say build.
We're going to create an additional script here and I'm going to say [REMOVED].
And I'm going to say mode here, I'm going to specify the production.
Now, maybe this is not clear for now, but when we run this development mode, it created this Bundle
Gere's file and this one was bigger, right?
As I told you, it's not going to be compressed.
But now let's run this line here, the build.
So how we can do this.
I'm going to go back KDDI, go back to the MAPI starter and to that folder because I was in the distribution
folder and I'm going to say ampm run, build.
So whatever we put in here, we just run it and let's see what's happening.
OK, now look at here, it's one point zero five kilobyte and here was four, so that is massive decrease.
So if I go here, this Bundakji is file will be one single line.
It will still work.
But this is for the production.
When we are actually finished in here, it will be the same result.
That's pretty much it we created today.
What we learn is to create the web, that configuration and regulation.
I think that you should, if you don't understand, go through this lecture again.
But the next lecture, it will be more interesting.
So stay with me and I will see you then.