Jonas: Now that we activated bundling
it's time to configure Babel to transpile
or super modern code back to ES5 code.
And this is still important right now even many years
after the new ES6 standard has been introduced.
And the reason for that is simply
that there are still many people out there
who are stuck on like a windows XP
or windows seven computer
and two cannot upgrade their old internet explorers
but we want our applications to work for everyone.
And so we need to keep everyone in mind.
Now, the good news is
that parcel actually automatically uses Babel
to transpile or code.
And we can configure Babel a lot if we want to
for example defining exactly
what browsers should be supported
but as always, that's a ton of work.
And so we don't want that.
And instead parcel makes
some very good default decisions for us.
And so we will simply mainly just go with these defaults.
Now just so you get a very broad
and very general overview of how Babel works.
Let's just take a look at their website.
So that's Babeljs.io
and then here in the documentation
let's take a look here at plugins.
Okay. So basically Babel works
with plugins and presets
that can both be configured.
Now a plugin is basically a specific
JavaScript feature that we want to transpile.
So to convert.
So for example let's say we only wanted
to convert arrow functions back to ES5
but leave everything else in ES6
for example, const and var declarations.
Now usually that doesn't make a lot of sense
because basically we will want to transpile
everything at the same time.
And so usually instead of using single plugins
for each of these features,
Babel actually uses presets.
And so a preset is basically a bunch
of plugins bundled together.
And its by default parcel is going to use this preset
and preset here.
And this preset will automatically select
which JavaScript features should be compiled
based on browser support.
And again that will all happen automatically
and out of the box
Babel will convert all features
So only browsers that are barely used anymore
with the market share of less than 0.25%
are not going to be supported
by the transpiling with this preset here.
So, that's a very brief overview
and we will come back here in a second
but for now let's start on NPM run start script again
just so we can take a look again at our final output.
So the one we have right now
or we had before was decompressed one
which was not really helpful.
And so now the script is ads, this one so F30.
So this one
and we can see right away that ES6 is no longer there.
So here we have var
instead of const that we had before.
Let's see if we have something else.
So here we used to have
a template literal i believe
and this was now converted to again
regular ES5 code by using this concat method.
So everything that we used from ES6 is now gone
but now let me show you something important.
So let's write some code here
which is basically not part of this preset here
because this preset ENF
does actually only include final features.
So features that are already part of the language
after passing the four stages of the AGMA process.
However, previously we used class fields
which at the time of recording are only at stage three.
And so let me show you how we could
transpile a class fields as well.
So let's just write a simple example here.
And so here Iam going to use a field called greeting
which I'm going to set to Hey,
and then just a normal constructor
which takes a name, this.name equals the name.
And then as the constructor is run,
it will simply log to the console
this.greeting and then the name.
So like, Hey Jonas.
So const Jonas is a new person Jonas.
But now let's see what happens here
and we should get some kind of error.
So let's see.
Oh, and apparently it does work now
when i last tested it, it didn't work
so let's make this private
maybe then we get the error i was expecting
but actually no, everything is working great.
Let me just search our code here for person.
And so here you can see
that the person class has nicely been converted to ES5.
So the class keyword is nowhere to be found anymore.
And then our entire code
that we had here was basically converted to this, all right?
And so therefore there's actually no more need
for what I was going to show you
which we had to do before
which was to include
this a plugin here for the class properties
because this is still an experimental feature.
And so yeah, we had to manually include this plugin here
in order to make this code work
but now that's no longer necessary.
And so that makes this even more amazing
but let's try another experimental one
for example, this knowledge coalescing operator
which is still also a bit more on the experimental side.
So let's say Jonah's or null, let's say.
And so that actually works as well.
Okay great.
Now there's still two more things
that I need to show you here still.
And so let's write some more code here.
So what I will do now is to use the ES6 find method
to find products in a cart
that are edit more than twice.
So that's I believe just cart.
So cart.find
because remember this is an ES6 method
and then return.quantity where it's greater or equal to.
And so that is only the pizza here.
So you see, well
maybe this isn't a cart, let's see what's happening.
Oh but never mind.
This is not filter.
It is just find, so it will simply find
the first element, right?
And so this is the first element
where the quantity is greater to.
But anyway, what I want to show you here
is that well let me show it to you actually first.
So to find this code here in this other script
I will copy this part and then put it here.
And so you'll see that here is basically that same code.
So the arrow function that we had is gone
and it was replaced by this regular function.
However, the ES6 method find is still here.
So it has not been converted to ES5.
Now the same is too for other things
for example, let's try promises.
So promise.resolve
So we're creating an immediately
resolved promise to make this really a quick example.
And let's just log X to the console
and so that works
but it works because our browser understands ES6
because if we take a look here now
then promise is also not converted to ES5.
So remember promise is an ES6 feature
but again, it was not converted back to ES5
and the reason for that is that
Babel can actually only transpile ES6 Syntax.
So data things like arrow functions,
classes, const, or the spread operator.
So these are basically things
that have an equivalent way of writing them in ES5.
So for example the arrow function,
it is simply a different syntax.
And so Babel can simply write function instead of data.
And the same goes with const.
So it's very easy to simply convert that to VAR
but the same is not true for real new features
that were added to the language
like find and promise.
So these new additions to the language
so these new features, they can simply not be transpiled.
It's simply not possible.
Only syntax is easy to convert, so easy to compile.
However, all hope is not lost.
So for these added features
again, such as promises or all the array methods
like finds and really a bunch of other stuff,
we can polyfill them.
And so that's why since the beginning
I've always been saying transpiling and polyfilling.
So these new features, we have to polyfill them.
Now Babel used to do polyfilling
out of the box some time ago
but recently they started to simply
recommending another library.
And so we now have to manually import data as well.
So import Core-js so that's the name of the library.
And then we usually only want to import a part
of that library and that's called Stable.
And so we can write this.
Okay.
Now usually we have to install
all of the packages first
but fortunately parcel is smart
enough to install this automatically.
Well at least that is how it should be.
So maybe that doesn't work after all
so let's manually install it, but that's weird.
So core-js.
So let's see.
And so here we go.
So let's re-save it.
And so here we go.
Okay.
So you should probably
also try to install core-js manually
and then you will able to use it like this.
So maybe you're starting to see
that D things really change all the time.
And so, hi, I'm even confused myself sometimes
on why certain things used to work
and now they work differently.
But the good thing is
that you don't really have to understand all this.
So this is really more like a recipe
that you just need to follow.
And then with time it will all become like a routine
and it will become simple.
But anyway, let's go back to our code
but you will notice that's the code we had before
is actually still there.
So it's still the same
and promise and find have not been replaced.
And that's because that's simply not the way
it's supposed to work.
So instead what polyfilling does
is to basically recreate defined function
and to make it available in this bundle
so that the codes can then use it.
`So let's search for array.prototype
which remember, is where all the array methods are put.
So array.prototype.find.
And so, well here it is.
So Babel then uses this weird create methods.
But what matters here is that
this will basically implement array prototype find
and the same for find index,
every some filter map and also for each
even though these less ones here are not ES6
but for some reason they are still polyfilled here.
Oh right? And the same for promise, probably.
Well not probably for sure.
Otherwise this is not going to work
and it's not easy to find it
but well, here's the definition of promise
which is going to be global promise
but I'm not gonna dig even deeper into this.
That's just not really necessary.
However, as you just saw before
the polyfilling is going to polyfill everything
even if we don't need it.
So we had to D find index method there as well.
Let's actually go back there.
So array.prototype.find
So it also created find index and every, and some
and so we are actually not even using these.
And so if we wanted
we could cherry pick basically
just the features that we actually want to polyfill.
Now that of course is a lot of work
but it will also greatly reduce the bundle size.
And so it might be worth it
if that's really a concern.
So we could instead of this.
So instead of basically importing everything there is
we can just say core-js stable and then only array
and then find like this.
So now if we go back here,
then, well then only this one should be here.
(indistinct) It looks different now.
And so probably only this one was not polyfilled
At the same you could do for a promise
like this okay.
So that's going to be a lot of work
which we usually don't do
but it is possible again if you are really worried
about your bundle size.
Finally, just to finish there is still one feature
that is not polyfilled by this one here.
And so we always need to install
just one more package
which is called NPM install regenerator-runtime.
So regenerator.That's correct.
So let's see, let's already include it here.
So we need import, so regenerator-runtime/runtime like this.
Alright? So this here is for polyfilling async functions.
So again, it probably looks a bit confusing
that we have to do all of this, but yeah, don't worry.
It's just a recipe that you have to follow.
Okay. And usually you would put
these imports here right at the top of your file
but in this case, we can just leave them here
because they will be hosted anyway, right?
Also keep in mind that all of this might change.
And so if you're watching this video
like in two years from now,
then things might be different
and things might not work the same.
And so once again make sure
that you then install
exactly the same versions as I have here
especially this core-js and regenerator-runtime.
And of course, also parcel.
So just as I told you in the last video.
Now okay.
And with this, we're actually done with this video
and also with learning about Modern JavaScript Development.
So basically with learning about Tooling,
such as parcel and babel and also about modules.
Now in the remainder of this section,
so the next two videos
we will just quickly also talk
about modern JavaScript coding.
So more on the actual programming side of things.
And so there we will learn or actually more review
how to write clean and modern JavaScript code.