Welcome back, ladies and gentlemen.
In today's lecture, we're going to focus on installing Babel.
Now the work flow is almost complete, right?
So we have to we have managed to do a lot of configurations so far, but this is one of the most important.
And after days, I promise we're going to start doing a real coding.
Now, some of the lectures here are a long but I really don't see that as a problem.
You can pause them.
You can watch them later.
You can do whatever you want.
So I can easily see the lectures before into three or four smellers.
But that's not going to do anything that will not bring down the amount of configuration we need to
do.
We still need to do this.
That's what I'm trying to say.
So after babble, we were ready to start coding.
Now we can jump to the website.
It's called Babble that Geass Dot IIO and you can Google it first.
If you if you can't if you can't see it like it like this, if you can have a result in a battle.
Is a JavaScript compiler use the next generation JavaScript today.
Now Babille seven is out.
And when this was released there were a couple of changes the way we installed the packages.
And here I'm going to show you the new way.
And also I'm going to try to show you the old way right now.
So I strongly recommend you to read the documentation here.
And because you are so far learning everything before we were doing everything like, you know, with
a console, like we just logging things.
Now, this is a little bit different.
This is more advanced.
And I want you, for example, after finishing this part to read the documentation or if it's something
not, for example, some of the commands, they are not working, then you can just Google it out here
in fine.
What's what's what was the change in what was the cause, why they just shut that command down and why
they replace it with something else.
Because you as a developers needs to do this right now.
For now, I'm going to show you the things are done without going through the documentation.
But sometimes you as a developers, you need to start doing this right now.
First things first.
We need to download a couple of packages.
The first packages that we need to install is called Bable Core.
And before so you go to your go to your desktop wherever you put your project there.
The folder.
Right.
I'm just going to zoom in layer here.
So before was like this.
MBM I'm just going to show you ampm so it's not a dramatic change, but it's a little bit change.
So before it was npm install babble, pour in here you can give it the flex save as a dependent development.
Right.
But now it's change and it should be npm install saved f so this actual line can go at the end.
But this is how they do it right now.
So I'm going to show you how it's in the specification and you're putting at Bable that core.
So we're sorry before was like with Dash here, now it's now we need to install this core.
OK, so the core, the biblical Hawza holds the functionality of this compiler.
That's why we need to install this is a core package that we need to have.
No, we will install multiple packages here in one line, in one go.
So I'm not going to waste your time.
So here I haven't shown you this before.
That's why I want to show you that you can install multiple packages in one go next that we want to
install.
It's called Babille Preset Environment.
So put at Nabal slash preset EMV sets for the environment.
And I will just show you what that will be in know future lecture.
So the price of the environment will take care of all of these modern features starting from year six
and they need to be converted back to year five.
That's why we need this package.
We said environment and finally we need a better loader.
So this will be used by the by the way, to load the Bebo files.
So Babille loader.
So you can see sometimes I call it Babbo, sometimes bable.
Yeah.
Doesn't doesn't really matter.
Right.
OK, so finally our output should look like this npm install Daschner save Dave so they will install
these three packages here.
This is the one, the first one.
So you don't put a comma here.
This is the second one.
This is a third one.
So make sure that they have space and I'm going to hit enter here and you need to wait for a while because
they're going to take a couple of maybe maybe ten or twenty seconds.
I'm going to pause the video.
OK, so actually the install really quickly.
So I'm going to go to the back package, the Jackson five.
And here they are.
So these are the three packages that we install in one line.
So now you know how to do this, right?
And that's pretty much it.
Now, let's use this Bable loader to convert the files back to iOS five.
So how are we going to do this?
We can do it here after the plugins.
So are we going to do it here in the configuration file?
I'm just going to close this port and now we need to create here a module.
So I'm going to see comma here module and I'm going to I'm going to pass in here.
An object and object goes with this curly brackets.
Right.
So the module we will have object inside and here we will define a set of rules.
Right.
So I'm going to see rules and I'm going to pass in an array here right now inside these rules.
So for each rule, we need to pass an object as well.
So I need this curly brackets.
So a little bit.
This is a little bit strange with this.
So all of these curly brackets, what it is, what it is, we need to still use this in order to configure
it correctly.
So another object here and now we need to test to find all the gas file in here.
The keyword is test.
And now I'm going to use something strange here because probably have never used before, but didn't
like me.
G.S. Dollar Sign and forward.
Now, what this will do is actually this is a regular expression, this port.
And what it will do, it will look through the entire entire package.
Enter here all of the folders or directories that we have.
It will look for it will test if we have JavaScript files that we will do.
And the second thing that we want to do is to exclude all of the files there here in these note modules.
Right.
Because there are a lot of files here.
As we store more and more packages, this will be big.
And we don't want the we don't want the rules to be applied to those to that node module so we can exclude
in here again the regular expression modules.
Now, the modules are excluded.
So we don't want here to do this.
And why do we we haven't done the regular expressions, but probably will need them in future.
So make sure that you Google and find a way.
How can you write regular expressions?
They're not there now.
So the note module folder contains a lot of JS files that we don't need.
Actually, that's why we exclude there.
In the last part here is we need to use we need to use the loader and that is really much it.
So I'm going to say here use and I'm going to say now we use the object again, one more object and
I'm going to say a loader babble loader, OK?
And once more so we have the module here and inside the module, we have a set of rules in.
We are testing if they have the JS extension, this is the extension.
For example, we do have the files here that indexed OJARS module module Dodgiest.
They all have these that Geass extension.
That's what we are looking for.
Right.
But we are excluding every genius extension that is located here.
I mean, yeah, there's luckily no modules after that.
We use the lower call Bable Loader and where we got this loader from back to Jason file because we already
saw this.
OK, nice.
So let's go back here.
What do we need to do now is to create something else, right?
So let's create a new file called Bable or C, and I will create it here.
And you file start with a Dot Syntex Beeble C and immediately will recognize that is a bable file.
No, inside we will create again an object right here.
I'm just gonna close this because I don't want to.
So here we are going to set an object with presets values right here.
I'm just going to say presets like this in here, we need these brackets.
So here we are collection the presets will be a collection of code transform plugins.
Now, these is like that inside here.
We need another racket's like this.
Make sure that you you follow me with the brackets, because if we don't put the brackets or anything
incorrectly, if we put something incorrect here, another set of brackets, it will give us an error
when we are doing to the compiling process.
OK, now here I'm going to say I'm going to be fine here.
The environment now, this is the packages that we installed before.
Right.
And I'm going to say at label.
E and V, right, come here, these brackets in inside, we need the targets, so let's do this together
and inside the targets, I will have browser's.
OK, browser's make sure that you do targets, make sure that you press its targets in browsers, OK,
for the browsers we can define what what browser.
So here we are defining an area of a browser.
Right.
So what I want here, I can see the last five versions and also we can define even the even the Internet
Explorer.
So here we can define that Internet Explorer to be greater than the version.
I'm going to explain this just shortly.
The Internet Explorer to be greater or equal to the version eight.
I think this is enough.
Now, here we specify the browsers that we want to target.
That's why I just put it here.
The targets in the browser is going to be, say, C last five version.
So this is needed because Bable now will know, which is six features need to convert for which browsers,
how many versions here we can put.
Let's do versions less five versions and stuff like that.
This is all in the documentation, by the way.
You can read more and more if you want it.
Pretty much we are done here right now, all of these future versions now of the JavaScript.
So for me, a six and to the E next day now will be converted back two years five.
So this is what we're trying to say.
OK, target the browsers, because now I want everything to be compatible, to be working and to be
converted back to year five and to be working correctly.
Now, sometimes this is not possible because not everything can be converted back to years five y because
it's five, for example.
They didn't have promises.
They didn't have template literals.
Right.
They didn't have const.
They had the variables before.
So this is not something that we can do all the time with with this.
So we need something else.
So we need to use a polypill in that we need to create or to install another package called Bable Polyfoam.
Now with this, for example, we can make the promise promises that we have in year six to be written
back to year five in.
After that, the code will be compatible.
So that's pretty much it for this one.
Save it.
Close it now.
How we how we can install it back to the terminal and say npm install, dash, dash, save.
Now we're going to see if this is a development right.
Bable Polli like that.
Pawley filled with double L idiot in here I have open up the people Poplarville and before was a little
bit different so you can copy even from here.
And because this is a powerful which will run before the source code, we need to be as a dependency,
not as a death dependency.
That's why we put this flag here, right.
Only say, OK, let's run it and let's see what will happen.
Should be relatively quickly.
OK, let's look at adjacent file.
Here it is.
Now, I do have the dev dependency up here and now I do have the dependencies here and that is Bable
Polyfoam.
So because this is a powerful which will run before your source code.
So that's why we need to put it.
There's a dependency now.
This will be saved in the back adjacent file in.
Now, we need to change a couple of things here.
You need to go back to this WePay config here.
We need to change this entry point now.
The entry point.
We need to change it.
We need to add that bable PAULITO here and how are we going to do it?
I'm just going to cut it from here.
Control Si or control X, sorry.
And I'm going to create an error here and I'm going to say, OK, Bable slash Qualys feel then I'm going
to get a comma here sorry.
And I'm going to pay the rest of it.
Right.
So now we have two entry points.
The first one is for the Babel Polyphemus.
In the second one is our actually our index dodgiest file.
Now the weapon will bundle the polypill in our code and it will bundle up together.
Right.
So we have two entry points in.
The first entry point is the poly field we installed here.
Save this one.
That's this one here.
So you can even copy it here, because sometimes you can make a mistake like a typo and it will not
work.
Make sure that you have a comma here.
Now, that's pretty much it.
We've done the modules, so let's let's see what we have done.
So in a while back, we have finished.
What we have done is we installed all the packages here that we do have first these three packages in
one go.
After that, we change it.
We.
Added the module in the in the that, so that is the second step, the third step, we just create these
Beeble or C file where we define the presets inside an object.
Right.
And we just say, OK, we tell the people what to look and what to convert.
The first thing that is we install the polypill.
I'm just going to show you this one as a dependencies.
And so this will be the feature that we cannot convert back to years five.
And one more thing that we need to do is just to test it out.
So I know this was super, super long for you guys, but I hope you understand what we have done.
This is the whole configuration thing that we need to do.
From now on, we will just focus on our code.
Now, how are we going to test this out?
OK, just type it ampm run def.
So I'm just going to run this script here, right.
Because it's a development mode and that will create in the we already have this one but it will change
it a little bit.
OK, run it in.
I should see all the green things.
If you see some something else then probably there is a mistake, some that you have done somewhere.
Or just compare my files to your files.
Just compare, compare them.
Here it is.
OK, now let's test it out.
So in the J is bundle that is what I can see here.
The we have here it is not module's bable polyphenol.
So this is already being included.
OK, now if you go back here, I'm just going to show you why we need this, because maybe you didn't
understand so far, but now you will.
Here we use this template literals.
Before they were not in year five, they were not being template literals.
They were like this quotes.
Right.
And also so that was that.
And let me just show you how this is converted into, OK, you have the bundle here.
Now, I can search this line here, copy it, search it.
And here it is.
Now, you see here that this is this was imported from the module judges.
But look at it.
Look at here.
Oh, where was it?
So use these quotes.
Right.
It doesn't use the template literals.
That's why we installed it this powerful.
That's why it's going to work.
And we are going to have no problems running the old calls.
For example, if you create constant here, comes here.
I don't know.
Let's see h and I'm just going to the thirty three and let's load it here.
And so this was important from the module just in the H const is coming from one end coming from my
index file here and I'm just going to print it out the H.
OK, now I'm going to save it and I'm going to run the, the spin room def again.
Right.
And I'm just going to wait to see here.
Is it done yet.
It's done now if I go back here and if I search.
Here, I will say, OK, and age cost is coming from the index file, right, and that is something
that we have done before.
Now look at here where age equal 33.
What happened?
Where was it?
Here it is, it's a variable, it's not constant.
Why?
Because in year five, we didn't have a const and let we did have variables.
That's why the polypill is working and it will convert that back to to a readable yosfiah.
And that's why this is H cool.
Now, I hope you got the idea what we are trying to achieve here.
We have the entire work process done and from the next lecture we will focus our focus on creating working
on our project.
This was the essential thing because without this, we couldn't do it.
We could we could start coding.
OK, so I will see you in the next one.