Narrator: Alright, and now as the final step,
let's integrate Babel into our workflow.
In order to make it really complete and ready
for us to start working on the project.
So, as you see from the website,
Babel is a JavaScript compiler.
In order to use next generation JavaScript, today.
And it can be rather complex and confusing to set it up,
but we're gonna use a very straightforward
configuration in order to do it.
And it's all here in the commendations and you can read
through it if you want. But of course,
I'm going to show you now, again,
the most straightforward way that there is to set up Babel.
So, first off, in order to make Babel work, we need again,
to download a couple of packages.
So, let's fire up our terminal. Come into this one,
and let's clear it up. And so the packages that we need to
install are, so again, npm install.
And the first one is babel core,
which contains the core functionality of the compiler.
The next one is babel present-env. And now we are doing
something that we didn't do before which is to install
many packages with the same line. And it's totally possible.
So we can install multiple packages in the same command.
So we have babel core and now the next one, if you want,
is babel preset env,
and this is a babel preset
that will take care, that all the modern JavaScript features
are converted back to ES5. And a bit more
on this one a bit later, again.
And finally, we need babel loader.
And this one is needed for Webpack in order to actually load
Babel files. Okay? But again more on loaders a bit later.
Now, finally, give it a save-dev here. And now we are
going to install all these three packages at the same time.
So, let's check it out here in the package.json file.
And indeed, here we have babel core loader and preset-env.
Okay, and now we need to learn about the
concept of loaders in Webpack.
So, loaders in Webpack allow us to import or to load
all kinds of different files. And more importantly,
to also process them. Like converting SASS to CSS Code or
covert ES6 code to ES5 JavaScript.
Which is exactly what we are gonna do now. Right?
And so, for that, we need the Babel loader because
Babel is the one that will convert this ES6 back to ES5.
And again, the syntax for this is a bit weird.
So, how it works, is we use module. Pass in an object,
and then in there, we need to specify the rules property.
And rules then receives an array of all of the
loaders that we want to use.
And for each loader, again, we need an object, right?
So, again this is all a bit weird and confusing,
but you just need to set this up once.
So once set up it will keep working forever basically right?
So, for each of the loaders, we need the test property.
And for this one we use something called
a regular expression. And we are gonna talk
a bit more about this later.
Okay. So, in this regular expression, what we want to say
is that we want to test for all the JavaScript files.
And the JavaScript files are the ones that end with .js.
So, we want .js at the end, and that's what this here means.
So this test here will basically look for all of the files
and test if they end in .js.
So that's what this regular expression here means.
Okay? So, all of the JavaScript files
will use the babel loader.
And so we use the use.
And then again we pass in an object here and then finally
we use the loader property and then we can say babel loader.
So, that is really a lot here to write and,
and again it looks really complex here with all of these
modules, rules, test and then use and finally the loader.
And a lot of newbies are confused by all of this,
but really I don't think it's such a big problem, okay?
So, babel loader,
this is the package that we installed before.
So, remember it's here in our package.json,
so, this babel loader package is what allows us to use this
here, then, in webpack. Okay?
And we can actually add something more here to this rule,
which is an exclude.
And with exclude we say that we want to exclude everything
that's in a node modules folder, okay?
Because if we wouldn't do this, than Babel would apply
to all of the thousands of JavaScript files
that are inside of this folder here.
And we of course don't want that to happen.
We just want it to do it in our own project,
so we can exclude this entire folder here.
And again, we use it as a regular expression here with these
two slashes at the beginning and at the end. Okay?
So again, what this rule does here is it tests for this
.js at the end which this one here means. And if it is a
JavaScript file than it will apply the babel loader, loader.
Okay? And so that's how we use Babel step one.
And step two is that we now actually also need
a babel config file.
So, not only for webpack we need this config file,
but also for Babel.
So, let's create a new file here.
And the one for Babel is usually called babelrc.
So, just .babelrc.
And once again VS Code here actually already recognizes
it here as a Babel six file
and so it puts the six here as the file icon.
So, in here all we pass is just this object.
And so this one is different from Webpack
which is a real JavaScript file.
This one here is just a dot file. Okay?
So we have this object and then we pass preset
and into preset we pass an array
and say that the preset that we want is called env.
Now, a preset here
is a collection of code transform plug-ins,
which are like the pieces of code that actually apply
the actual transformations to our code. Okay?
And the one that we select here is the env.
which stands for environment.
And we actually installed this here before, as a plug-in.
Right? As a package, sorry. So the babel preset environment.
Okay? And so now in the config file,
that is exactly the one that we use.
So preset, environment.
So we select the preset and say that the
one that we want is the environment.
So the one based on the environment.
And now we can actually specify the environment
that we want to target, okay?
And by environment, I mean like the browsers.
So, we can do it like this.
Write target.
And actually this needs to be in quotes, like this.
And then we pass in another object and so once more,
this is really confusing, you know.
Okay, so browsers.
And now, finally we just pass in an array
saying which browsers we want to target. Okay?
So in here we can now say stuff like,
the last five versions.
And what this will do
is that Babel automatically figures out which ES6 features
it actually needs to convert in order to work
on the last five versions of all the browsers. Okay?
And so that is what it means with environment.
So we say which environment we want it to work,
and then Babel automatically figures it out.
There are of course other presets we could use,
but then we would like manually have to say
what we want to convert and what not. And with this preset,
well, it all just happens automatically.
So we can say something like last five versions,
we can say two or ten or whatever.
And we can also say something like we want,
at least the internet explorer more than eight. Okay?
And we can add more stuff to this
and it can find more examples on the documentations of Babel
but I guess for now, this is enough.
So again we say that the preset should be based on
the environment and that we want to target the browsers,
the last five versions and internet explorer greater or
equal to version eight. Okay?
Give it a save, close it up and we're good to go.
So, right now ES6 or even ES7, ES8 or ES Next,
so all the future versions of ES, so of JavaScript,
will be converted back to ES5.
Now, there are some things that we cannot really convert
because they simply were not present
in the ES5 version of the language.
And so there is no way that we can simply convert them
back from ES6 to ES5. And so these need to be pollyfilled.
And I'm talking about things like promises
or methods like array.from.
So stuff that just were not present in ES5
and so we cannot really convert them back, okay?
And so we need to polyfill them.
Which basically adds this to our code.
So, the promise object for example
is not present in ES5, right?
But we can write some ES5 code that basically implements
the promise in ES5 so that we can then use it in our code.
Okay? And so that is exactly what a polyfill does. So.
How do we use a polyfill?
We need to install another package. Okay?
So npm, install,
babel,
polyfill.
Now this code is actually code that will be
in our final code. So as I've explained,
this will basically implement like a promise in ES5.
And so this is not really a development tool,
but it is really code that is going to go
into our final bundle, right?
And so this is not a devDependency,
but it's a real dependency. As I like to call it.
And so, we just use save and not savedev. Alright?
And it installs as you can see down here.
Now all we have to do is to add it in our webpack config.
And where we do it is in our entry point.
So, I said before that in the beginning
we just had one entry point, but there can be multiple.
And now we actually will have multiple.
And so now we pass in an array.
So let's open it and close it here.
And so our entry points are now this polyfill that we just
installed and then our original entry point. Okay?
So we can simply say,
babel, polyfill here.
And webpack will then automatically
figure out where this code is located and will then bundle
it together with this code that we have here.
And so again, we have one huge bundle, which has both
all the polyfills for the ES6 code
as well as our own code of course and index.js file. Okay?
So basically installing babel was a three step process.
First, we installed all of these packages
and then added this rule here with the babel loader.
Second, we created then a config file here,
in order to tell Babel which stuff
we want to convert back to ES5.
And then finally, we also included a
polyfill in order to not convert,
but polyfill the features that we cannot
convert with the babel loaders.
So, with all of this work done, let's now finally test this.
So, in the index.js file we actually have this
well it's already ES6 so this template string
and also in here we have, well
here we don't really have an ES6.
So let's also add a constant here,
so const x=23
and let's edit now into this template string here somewhere.
So, num from another module called test.js.
Let's just add...
variable x is...
x. Okay.
So let's give it a save and then run or a webpack command.
Okay? So npm run dev. Right?
And so this will now create or bundle and whoa,
we have some errors here so let's check it out.
So there's some errors here.
And we can see it's in Babel and so we have something
invalid here in our config file. Okay?
So, presets and so it looks like we're
missing like some parentheses there.
Right? So let's go back to our babelrc file
and what we're missing is that here
we actually need another brackets. Okay?
So we have one brackets here and
we then need to close it. In here.
And what's also missing here is a missing 's' here.
So it's presets and not just preset and the same for target.
So it's targets and not just target. Okay?
So give it a save now and let's try it again.
And so now it should really work.
And you see. Yeah. Now it's done. Now it work just fine.
So let's try and open up this bundle.js file
which was just converted.
And so, whoa. So you see here, let's go to the beginning.
That we have this huge amount of code,
and most of this actually now comes from the babel polyfill.
So you see down here when we scroll
that it actually included here the babel polyfill.
And so all of this weird code here,
all of this is probably coming from the babel polyfill.
Okay? But we will also be able to find our own code in here.
So, let's grab this piece of code here
and then search for it in the bundle.
Then we will be able to find our own code.
And so here it is.
And you can already see that it actually did,
decompiling from ES6 to ES5.
So before we had const x=23 and now we have var here, right?
And also before we had
(overlapping voices)
in the console.log and now you see these normal quotes
and then the plus signs in order to join the strings,
just like we did it in the ES5 way.
And so this proves that Babel is now really working.
It is doing the real conversion from ES6 to ES5
and it's also doing the polyfill.
So it included all of this polyfilled that we specified.
Okay. And so now we're actually really done with our set-up.
So we used entry points, we used outputs,
we used a devServer, plugins and also loaders
here in our webpack configuration.
And so I hope that you're fairly confident
with using webpack at this point.
Of course there is a ton more to learn.
And you can always check out the webpack documentation.
Or you can search for some tutorials online.
And there's a lot more to learn actually.
For example you can use loaders for
SASS in order to convert it to CSS, and that's
something very popular and that's very useful as well.
So you don't need to include an additional SASS converter
outside of webpack so you can do it all
inside of webpack very nicely.
But in this project that's not really necessary
and so again we keep it here very simple,
just in order to make it work according to our needs here.
So that being said, I hope you learned quite a lot
in this small series of webpack lectures
so that you're now ready
to really move on to the project from now on.