WEBVTT

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

00:00:00.036 --> 00:00:03.896 align:middle
If you watched episode 2
of our JavaScript series,

00:00:04.216 --> 00:00:09.136 align:middle
then you know that ECMAScript is the official
name of the JavaScript language standard

00:00:09.766 --> 00:00:17.086 align:middle
and that ECMAScript version 6 - or
ES6 - introduced the idea of modules.

00:00:17.816 --> 00:00:23.516 align:middle
Modules are what we've been taking
advantage of this entire tutorial:

00:00:24.106 --> 00:00:27.126 align:middle
exporting and requiring values
from different files.

00:00:27.746 --> 00:00:29.076 align:middle
But... surprise!

00:00:29.596 --> 00:00:34.856 align:middle
In ECMAScript, the require
function does not exist.

00:00:35.476 --> 00:00:43.246 align:middle
Whaaaat?! The require statement was
basically invented by Node, back before ES6:

00:00:44.276 --> 00:00:48.976 align:middle
Node needed a way to require files,
so they invented their own way.

00:00:49.916 --> 00:00:55.696 align:middle
Later, ECMAScript decided to make the idea
of modules part of the standard language.

00:00:56.116 --> 00:01:00.756 align:middle
But when they did, they used a
different keyword than require!

00:01:01.556 --> 00:01:06.366 align:middle
Yep, there are two valid
syntaxes for working with modules!

00:01:06.976 --> 00:01:10.926 align:middle
But... it's not a big deal:
they work exactly the same,

00:01:11.046 --> 00:01:15.776 align:middle
except that the official
syntax has one small advantage.

00:01:16.636 --> 00:01:18.776 align:middle
Let's use the official module syntax.

00:01:19.676 --> 00:01:26.196 align:middle
Instead of saying const Helper =
require(), say import Helper from.

00:01:26.246 --> 00:01:29.676 align:middle
It's that simple!

00:01:30.126 --> 00:01:32.126 align:middle
And it doesn't change anything.

00:01:32.966 --> 00:01:38.226 align:middle
In RepLogHelper, we also need to change
our export to use the new syntax.

00:01:38.226 --> 00:01:44.816 align:middle
Instead of module.exports =
Helper, use export default Helper.

00:01:45.816 --> 00:01:48.886 align:middle
We'll talk about what the
default part means later.

00:01:48.886 --> 00:01:55.306 align:middle
But for now, it's always export default
and then what you want to export.

00:01:56.236 --> 00:02:01.836 align:middle
You can mix the two syntaxes - require
and import - to a certain point,

00:02:02.206 --> 00:02:04.186 align:middle
but you may run into some problems.

00:02:05.056 --> 00:02:10.866 align:middle
Your best bet is to pick your favorite - mine
is import and export - and use it everywhere.

00:02:10.866 --> 00:02:15.916 align:middle
So let's update everything:
import $ from 'jquery',

00:02:18.336 --> 00:02:23.816 align:middle
import swal from 'sweetalert2'
and import Routing from '.

00:02:23.816 --> 00:02:24.836 align:middle
/Routing'.

00:02:29.656 --> 00:02:33.536 align:middle
At the bottom, use export default RepLogApp.

00:02:34.736 --> 00:02:40.706 align:middle
Cool! RepLogHelper is already
ok, and in Routing.js,

00:02:41.206 --> 00:02:44.536 align:middle
change this to: export default window.Routing.

00:02:45.796 --> 00:02:50.866 align:middle
Keep going for the 3 entry
files: import $ from 'jquery'.

00:02:52.746 --> 00:02:58.636 align:middle
If you don't need a return value, it's
even easier: just import 'bootstrap'.

00:02:59.466 --> 00:03:01.586 align:middle
Repeat that for the CSS files.

00:03:06.406 --> 00:03:12.506 align:middle
In login.js, import jQuery
again, then import the CSS file.

00:03:17.076 --> 00:03:23.846 align:middle
And one more time in rep_log.js:
import jQuery and import RepLogApp.

00:03:28.276 --> 00:03:33.826 align:middle
And... assuming I didn't mess anything
up, our build should still be happy!

00:03:34.576 --> 00:03:37.106 align:middle
Check out the terminal: yes!

00:03:37.306 --> 00:03:38.536 align:middle
No errors.

00:03:39.316 --> 00:03:41.936 align:middle
Move over to your browser and check it!

00:03:44.276 --> 00:03:45.466 align:middle
Looks great!

00:03:45.466 --> 00:03:48.166 align:middle
And... yea!

00:03:48.166 --> 00:03:49.536 align:middle
That's it!

00:03:49.916 --> 00:03:53.236 align:middle
Just two nearly-identical syntaxes...

00:03:53.576 --> 00:03:54.156 align:middle
because...

00:03:54.156 --> 00:03:55.356 align:middle
more is better?!

00:03:56.316 --> 00:04:00.656 align:middle
The biggest reason I want you to
know about import and export is

00:04:00.656 --> 00:04:05.716 align:middle
so that you know what it means when
you see it in code or documentation.

00:04:06.456 --> 00:04:13.676 align:middle
But, there is one small advantage to import and
export, and it relates to this default keyword.

00:04:14.776 --> 00:04:18.626 align:middle
Usually, you'll want to export
just one value from a module.

00:04:19.486 --> 00:04:26.066 align:middle
In that case, you say export default and then
you receive this value when using import.

00:04:27.096 --> 00:04:28.706 align:middle
But... technically...

00:04:29.066 --> 00:04:35.866 align:middle
you can export multiple things from a module,
as long as you give each of them a name.

00:04:35.986 --> 00:04:39.926 align:middle
For example, instead of export default Helper,

00:04:40.386 --> 00:04:44.896 align:middle
we could export an object with
a Helper key and a foo key.

00:04:46.046 --> 00:04:50.816 align:middle
Then, the import has a slightly
different syntax where you say explicitly

00:04:51.076 --> 00:04:53.466 align:middle
which of those keys you want to import.

00:04:54.586 --> 00:04:59.896 align:middle
I don't usually do this in my code, but
there is one case where it can be helpful.

00:05:00.786 --> 00:05:04.976 align:middle
Imagine you're using a huge
external library - like lodash -

00:05:05.366 --> 00:05:08.736 align:middle
which is really just a collection
of independent functions.

00:05:09.676 --> 00:05:17.606 align:middle
If that library exports its values correctly,
you could import just the functions you need,

00:05:18.106 --> 00:05:21.346 align:middle
instead of importing the entire exported value.

00:05:22.166 --> 00:05:29.706 align:middle
Then, at least in theory, thanks to a feature
called "tree shaking", Webpack would realize

00:05:29.706 --> 00:05:33.266 align:middle
that you're only using a
few parts of that library,

00:05:33.586 --> 00:05:37.746 align:middle
and only include those in
the final, compiled file.

00:05:38.836 --> 00:05:44.636 align:middle
In reality, this still seems a bit buggy:
the unused code doesn't always get removed.

00:05:45.086 --> 00:05:49.796 align:middle
But, the point is this: import
and export have a subtle advantage

00:05:50.066 --> 00:05:51.496 align:middle
and are the ECMAScript standard.

00:05:51.666 --> 00:05:52.776 align:middle
So, use them!

00:05:53.816 --> 00:05:59.166 align:middle
Ok, it's time to find out how we can
create a crazy-fast production build!