WEBVTT

1
00:00:01.170 --> 00:00:03.500
<v Instructor>Besides native ES Modules,</v>

2
00:00:03.500 --> 00:00:05.290
and the module pattern,

3
00:00:05.290 --> 00:00:07.610
there are also other module systems,

4
00:00:07.610 --> 00:00:08.650
that have been used

5
00:00:08.650 --> 00:00:11.150
by JavaScript in the past.

6
00:00:11.150 --> 00:00:14.440
But again, they were not native JavaScript.

7
00:00:14.440 --> 00:00:18.290
so they relied on some external implementations.

8
00:00:18.290 --> 00:00:19.830
And two examples are:

9
00:00:19.830 --> 00:00:21.350
AMD Modules,

10
00:00:21.350 --> 00:00:23.850
and CommonJS modules.

11
00:00:23.850 --> 00:00:26.320
And in fact, CommonJS modules,

12
00:00:26.320 --> 00:00:28.400
are worth taking a look at.

13
00:00:28.400 --> 00:00:29.963
And so let's do that now.

14
00:00:31.490 --> 00:00:34.594
Now CommonJS modules are important for us,

15
00:00:34.594 --> 00:00:37.540
because they have been used in Node.js,

16
00:00:37.540 --> 00:00:40.430
for almost all of its existence.

17
00:00:40.430 --> 00:00:42.520
So only very recently,

18
00:00:42.520 --> 00:00:45.150
ES Modules have actually been implemented,

19
00:00:45.150 --> 00:00:46.870
in Node.js.

20
00:00:46.870 --> 00:00:47.703
And remember,

21
00:00:47.703 --> 00:00:49.200
Node.js is a way

22
00:00:49.200 --> 00:00:51.830
of running JavaScript on a web server,

23
00:00:51.830 --> 00:00:54.210
outside of a browser.

24
00:00:54.210 --> 00:00:56.520
Now the big consequence of this,

25
00:00:56.520 --> 00:00:58.550
is that almost all the modules,

26
00:00:58.550 --> 00:01:00.630
in the npm repository,

27
00:01:00.630 --> 00:01:01.610
that we talked about

28
00:01:01.610 --> 00:01:04.720
in the beginning of this section, remember?

29
00:01:04.720 --> 00:01:06.170
So all these modules

30
00:01:06.170 --> 00:01:08.230
that we can use in our own code,

31
00:01:08.230 --> 00:01:11.630
still use the CommonJS module system.

32
00:01:11.630 --> 00:01:12.604
And the reason for that,

33
00:01:12.604 --> 00:01:15.120
is that npm was originally

34
00:01:15.120 --> 00:01:17.460
only intended for node.

35
00:01:17.460 --> 00:01:20.900
Which as they said, uses commonJS.

36
00:01:20.900 --> 00:01:24.400
Only later npm became the standard repository,

37
00:01:24.400 --> 00:01:26.750
for the whole JavaScript world.

38
00:01:26.750 --> 00:01:29.610
And so now we are basically stuck,

39
00:01:29.610 --> 00:01:31.400
with CommonJS.

40
00:01:31.400 --> 00:01:32.810
And so therefore,

41
00:01:32.810 --> 00:01:34.270
you will see probably,

42
00:01:34.270 --> 00:01:37.230
a lot of CommonJS still around.

43
00:01:37.230 --> 00:01:38.740
And so let's take a quick second

44
00:01:38.740 --> 00:01:40.970
to see what it looks like.

45
00:01:40.970 --> 00:01:42.340
So let's just pretend

46
00:01:42.340 --> 00:01:43.450
that we want to export

47
00:01:43.450 --> 00:01:45.680
something from this module.

48
00:01:45.680 --> 00:01:47.380
And so let's get,

49
00:01:47.380 --> 00:01:48.823
a disfunction here again,

50
00:01:50.150 --> 00:01:51.713
like this.

51
00:01:52.930 --> 00:01:54.320
All right?

52
00:01:54.320 --> 00:01:57.470
And so just like ES6 modules,

53
00:01:57.470 --> 00:01:58.550
in CommonJS,

54
00:01:58.550 --> 00:02:00.623
one file, is one module.

55
00:02:02.136 --> 00:02:04.720
And we export something from a module,

56
00:02:04.720 --> 00:02:07.530
using export.dot,

57
00:02:07.530 --> 00:02:09.273
and then the name of the export.

58
00:02:12.840 --> 00:02:13.970
So let's say,

59
00:02:13.970 --> 00:02:15.170
export.dot (indistinct),

60
00:02:16.337 --> 00:02:17.810
and then,

61
00:02:17.810 --> 00:02:20.330
whatever we want to export there.

62
00:02:20.330 --> 00:02:21.620
Now of course,

63
00:02:21.620 --> 00:02:23.870
this is not going to work in the browser,

64
00:02:23.870 --> 00:02:26.163
but it would work in Node.js.

65
00:02:27.970 --> 00:02:29.810
So this export keyword here,

66
00:02:29.810 --> 00:02:31.400
is basically an object

67
00:02:31.400 --> 00:02:34.800
that again, is of course not defined here

68
00:02:34.800 --> 00:02:36.060
in our code,

69
00:02:36.060 --> 00:02:38.210
and also not in the browser.

70
00:02:38.210 --> 00:02:39.440
But in Node.js,

71
00:02:39.440 --> 00:02:41.100
it is an important object,

72
00:02:41.100 --> 00:02:42.700
that is used.

73
00:02:42.700 --> 00:02:45.720
Now then to import something,...

74
00:02:45.720 --> 00:02:47.520
And that's just right this here.

75
00:02:47.520 --> 00:02:48.830
So export,

76
00:02:48.830 --> 00:02:49.693
and import.

77
00:02:50.610 --> 00:02:52.690
And so this code is not for you to write.

78
00:02:52.690 --> 00:02:55.120
I just want to show this to you.

79
00:02:55.120 --> 00:02:57.460
So if we didn't want it to import this,

80
00:02:57.460 --> 00:02:59.170
would be pretty similar,

81
00:02:59.170 --> 00:03:01.593
to ES Modules actually,

82
00:03:02.500 --> 00:03:03.610
but then from here,

83
00:03:03.610 --> 00:03:07.060
we will call a require function.

84
00:03:07.060 --> 00:03:08.293
So just like this.

85
00:03:12.660 --> 00:03:13.780
So again, require

86
00:03:13.780 --> 00:03:15.690
is of course not defined,

87
00:03:15.690 --> 00:03:17.870
here in our browser environment,

88
00:03:17.870 --> 00:03:19.980
but it is defined in Node.js,

89
00:03:19.980 --> 00:03:21.230
because this is part

90
00:03:21.230 --> 00:03:23.423
of the CommonJS specification.

91
00:03:27.254 --> 00:03:29.220
And that's actually all I had to show you,

92
00:03:29.220 --> 00:03:30.810
even though this is, of course,

93
00:03:30.810 --> 00:03:33.120
just scratching the surface.

94
00:03:33.120 --> 00:03:34.720
But all I wanted to do here,

95
00:03:34.720 --> 00:03:36.380
is to just let you know,

96
00:03:36.380 --> 00:03:38.620
that there are different module systems,

97
00:03:38.620 --> 00:03:40.010
and that CommonJS,

98
00:03:40.010 --> 00:03:41.800
is particularly important,

99
00:03:41.800 --> 00:03:44.570
in the world of JavaScript.

100
00:03:44.570 --> 00:03:45.870
Now in the long run,

101
00:03:45.870 --> 00:03:47.160
ES6 Modules,

102
00:03:47.160 --> 00:03:48.610
will hopefully,

103
00:03:48.610 --> 00:03:49.760
and probably,

104
00:03:49.760 --> 00:03:52.950
replace all of these different module systems.

105
00:03:52.950 --> 00:03:54.270
But it's still gonna be

106
00:03:54.270 --> 00:03:56.880
a long way until you're there.

107
00:03:56.880 --> 00:03:58.050
And so it's good

108
00:03:58.050 --> 00:03:59.330
that at least you know,

109
00:03:59.330 --> 00:04:00.660
what is (indistinct),

110
00:04:00.660 --> 00:04:02.480
when you stumble upon

111
00:04:02.480 --> 00:04:03.980
the syntax in the future,

112
00:04:03.980 --> 00:04:04.813
in your work.

113
00:04:06.520 --> 00:04:07.353
And with this,

114
00:04:07.353 --> 00:04:08.186
let's move on,

115
00:04:08.186 --> 00:04:10.110
to the rest of the section,

116
00:04:10.110 --> 00:04:11.210
where we will learn

117
00:04:11.210 --> 00:04:14.550
how to use third party packages from npm,

118
00:04:14.550 --> 00:04:17.110
how to bundle all modules together,

119
00:04:17.110 --> 00:04:19.810
and also how to transpile or code back,

120
00:04:19.810 --> 00:04:21.350
to ES 5,

121
00:04:21.350 --> 00:04:22.473
for old browsers.