WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.016 --> 00:00:02.346 align:middle
Babel is pretty amazing.

00:00:02.836 --> 00:00:07.436 align:middle
But, it's even doing something else
automatically that we haven't realized yet!

00:00:08.006 --> 00:00:13.296 align:middle
Back in admin_article_form.js, and it doesn't
matter where, but down in ReferenceList,

00:00:13.536 --> 00:00:20.786 align:middle
I'm going to add var stuff = new WeakSet([]);
WeakSet is an object that was introduced

00:00:20.786 --> 00:00:25.246 align:middle
to JavaScript, um, ECMAScript in 2015.

00:00:25.246 --> 00:00:29.456 align:middle
Because the Encore watch script is
running, go over and refresh the built file.

00:00:30.546 --> 00:00:33.766 align:middle
Here it is: var stuff = new WeakSet([]);.

00:00:34.496 --> 00:00:35.876 align:middle
That's not surprising, right?

00:00:36.186 --> 00:00:43.446 align:middle
I mean, we're telling Babel that we only need to
support really new browsers, so there's no need

00:00:43.446 --> 00:00:46.376 align:middle
to rewrite this to some old, compatible code...

00:00:46.816 --> 00:00:48.596 align:middle
right? Well...

00:00:48.846 --> 00:00:50.806 align:middle
it's more complicated than that.

00:00:51.216 --> 00:00:55.576 align:middle
WeakSet is not a new syntax
that Babel can simply change

00:00:55.576 --> 00:01:00.026 align:middle
to some old syntax: it's
an entirely new feature!

00:01:00.696 --> 00:01:06.466 align:middle
There are a bunch of these and some are
really important, like the Promise object

00:01:06.786 --> 00:01:09.156 align:middle
and the fetch() function for AJAX calls.

00:01:10.096 --> 00:01:14.086 align:middle
To support totally new features, you
need something called a polyfill.

00:01:14.686 --> 00:01:19.616 align:middle
A polyfill is a normal JavaScript library
that adds a feature if it's missing.

00:01:19.666 --> 00:01:25.796 align:middle
For example, there's a polyfill just for
WeakSet, which you can import if you want

00:01:25.796 --> 00:01:29.186 align:middle
to make sure that WeakSet
will work in any browser.

00:01:29.686 --> 00:01:34.456 align:middle
But, keeping track of whether or
not you imported a polyfill...

00:01:34.456 --> 00:01:40.366 align:middle
and whether or not you even need a polyfill
- maybe the feature is already available

00:01:40.366 --> 00:01:43.516 align:middle
in the browsers you need to support - is a pain!

00:01:43.826 --> 00:01:46.876 align:middle
So... Encore pre-configures Babel to...

00:01:47.146 --> 00:01:48.606 align:middle
just do it for us.

00:01:49.246 --> 00:01:49.666 align:middle
Check it out.

00:01:50.066 --> 00:01:54.166 align:middle
Go back to package.json and change
this to support older browsers.

00:01:54.806 --> 00:01:59.726 align:middle
Then, just like before, go to your
terminal and manually clear the Babel cache:

00:02:00.116 --> 00:02:10.226 align:middle
rm -rf node_modules/.cache/babel-loader/
And restart Encore: Ok,

00:02:10.536 --> 00:02:15.606 align:middle
let's go back to the browser, refresh the
built JavaScript file and search for WeakSet.

00:02:16.596 --> 00:02:20.116 align:middle
It still looks exactly like our original code.

00:02:20.516 --> 00:02:24.196 align:middle
But now, just search for "weak".

00:02:25.486 --> 00:02:27.836 align:middle
Woh. This is a bit hard to read,

00:02:28.206 --> 00:02:35.196 align:middle
but it's importing something
called core-js/modules/es.weak-set.

00:02:35.846 --> 00:02:40.026 align:middle
This core-js package is a
library full of polyfills.

00:02:40.566 --> 00:02:43.666 align:middle
Babel realized that we're trying to use WeakSet

00:02:44.046 --> 00:02:48.786 align:middle
and so it automatically added an
import statement for the polyfill!

00:02:49.346 --> 00:02:53.216 align:middle
This is identical to us manually
going to the top of the file

00:02:53.396 --> 00:02:58.896 align:middle
and adding import 'core-js/modules/es.weak-set'.

00:02:59.366 --> 00:03:00.206 align:middle
How cool is that?!

00:03:00.206 --> 00:03:06.566 align:middle
And... this is not the first time Babel
has automatically added a polyfill!

00:03:08.546 --> 00:03:10.856 align:middle
Open up build/app.js.

00:03:12.006 --> 00:03:17.666 align:middle
Back in the editor, the get_nice_message
module used a String method called repeat().

00:03:18.276 --> 00:03:22.776 align:middle
Whelp, it turns out that
repeat() is a fairly new feature!

00:03:24.106 --> 00:03:25.826 align:middle
Search for repeat in the built file.

00:03:26.766 --> 00:03:33.736 align:middle
There it is: it's importing
core-js/modules/es.string.repeat.

00:03:34.576 --> 00:03:38.386 align:middle
When I used this function, I
wasn't even thinking about whether

00:03:38.386 --> 00:03:43.096 align:middle
or not that feature was new and if it was
available in the browsers we need to support!

00:03:43.406 --> 00:03:46.526 align:middle
But because Encore has our
back, it wasn't a problem.

00:03:47.006 --> 00:03:48.866 align:middle
That's a powerful idea.

00:03:49.706 --> 00:03:53.776 align:middle
By the way, this is all configured
in webpack.config.js:

00:03:54.096 --> 00:03:56.106 align:middle
it's this .configureBabel() method.

00:03:57.016 --> 00:04:00.636 align:middle
Generally-speaking, this is
how you can configure Babel.

00:04:01.046 --> 00:04:06.466 align:middle
The useBuiltIns: 'usage' and
corejs: 3 are the key parts.

00:04:07.086 --> 00:04:11.936 align:middle
Together, these say: please
automatically import polyfills when you see

00:04:11.936 --> 00:04:17.816 align:middle
that I'm using a new feature and I've
already installed version 3 of corejs.

00:04:17.816 --> 00:04:23.496 align:middle
That package was pre-installed in the
original package.json we got from the recipe.

00:04:24.586 --> 00:04:30.126 align:middle
Next: let's demystify a feature that
we disabled way back at the beginning

00:04:30.126 --> 00:04:33.386 align:middle
of this tutorial: the single runtime chunk.