Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,170 --> 00:00:03,500
Besides native ES Modules,
2
2
00:00:03,500 --> 00:00:05,290
and the module pattern,
3
3
00:00:05,290 --> 00:00:07,610
there are also other module systems,
4
4
00:00:07,610 --> 00:00:08,650
that have been used
5
5
00:00:08,650 --> 00:00:11,150
by JavaScript in the past.
6
6
00:00:11,150 --> 00:00:14,440
But again, they were not native JavaScript.
7
7
00:00:14,440 --> 00:00:18,290
so they relied on some external implementations.
8
8
00:00:18,290 --> 00:00:19,830
And two examples are:
9
9
00:00:19,830 --> 00:00:21,350
AMD Modules,
10
10
00:00:21,350 --> 00:00:23,850
and CommonJS modules.
11
11
00:00:23,850 --> 00:00:26,320
And in fact, CommonJS modules,
12
12
00:00:26,320 --> 00:00:28,400
are worth taking a look at.
13
13
00:00:28,400 --> 00:00:29,963
And so let's do that now.
14
14
00:00:31,490 --> 00:00:34,594
Now CommonJS modules are important for us,
15
15
00:00:34,594 --> 00:00:37,540
because they have been used in Node.js,
16
16
00:00:37,540 --> 00:00:40,430
for almost all of its existence.
17
17
00:00:40,430 --> 00:00:42,520
So only very recently,
18
18
00:00:42,520 --> 00:00:45,150
ES Modules have actually been implemented,
19
19
00:00:45,150 --> 00:00:46,870
in Node.js.
20
20
00:00:46,870 --> 00:00:47,703
And remember,
21
21
00:00:47,703 --> 00:00:49,200
Node.js is a way
22
22
00:00:49,200 --> 00:00:51,830
of running JavaScript on a web server,
23
23
00:00:51,830 --> 00:00:54,210
outside of a browser.
24
24
00:00:54,210 --> 00:00:56,520
Now the big consequence of this,
25
25
00:00:56,520 --> 00:00:58,550
is that almost all the modules,
26
26
00:00:58,550 --> 00:01:00,630
in the npm repository,
27
27
00:01:00,630 --> 00:01:01,610
that we talked about
28
28
00:01:01,610 --> 00:01:04,720
in the beginning of this section, remember?
29
29
00:01:04,720 --> 00:01:06,170
So all these modules
30
30
00:01:06,170 --> 00:01:08,230
that we can use in our own code,
31
31
00:01:08,230 --> 00:01:11,630
still use the CommonJS module system.
32
32
00:01:11,630 --> 00:01:12,604
And the reason for that,
33
33
00:01:12,604 --> 00:01:15,120
is that npm was originally
34
34
00:01:15,120 --> 00:01:17,460
only intended for node.
35
35
00:01:17,460 --> 00:01:20,900
Which as they said, uses commonJS.
36
36
00:01:20,900 --> 00:01:24,400
Only later npm became the standard repository,
37
37
00:01:24,400 --> 00:01:26,750
for the whole JavaScript world.
38
38
00:01:26,750 --> 00:01:29,610
And so now we are basically stuck,
39
39
00:01:29,610 --> 00:01:31,400
with CommonJS.
40
40
00:01:31,400 --> 00:01:32,810
And so therefore,
41
41
00:01:32,810 --> 00:01:34,270
you will see probably,
42
42
00:01:34,270 --> 00:01:37,230
a lot of CommonJS still around.
43
43
00:01:37,230 --> 00:01:38,740
And so let's take a quick second
44
44
00:01:38,740 --> 00:01:40,970
to see what it looks like.
45
45
00:01:40,970 --> 00:01:42,340
So let's just pretend
46
46
00:01:42,340 --> 00:01:43,450
that we want to export
47
47
00:01:43,450 --> 00:01:45,680
something from this module.
48
48
00:01:45,680 --> 00:01:47,380
And so let's get,
49
49
00:01:47,380 --> 00:01:48,823
a disfunction here again,
50
50
00:01:50,150 --> 00:01:51,713
like this.
51
51
00:01:52,930 --> 00:01:54,320
All right?
52
52
00:01:54,320 --> 00:01:57,470
And so just like ES6 modules,
53
53
00:01:57,470 --> 00:01:58,550
in CommonJS,
54
54
00:01:58,550 --> 00:02:00,623
one file, is one module.
55
55
00:02:02,136 --> 00:02:04,720
And we export something from a module,
56
56
00:02:04,720 --> 00:02:07,530
using export.dot,
57
57
00:02:07,530 --> 00:02:09,273
and then the name of the export.
58
58
00:02:12,840 --> 00:02:13,970
So let's say,
59
59
00:02:13,970 --> 00:02:15,170
export.dot (indistinct),
60
60
00:02:16,337 --> 00:02:17,810
and then,
61
61
00:02:17,810 --> 00:02:20,330
whatever we want to export there.
62
62
00:02:20,330 --> 00:02:21,620
Now of course,
63
63
00:02:21,620 --> 00:02:23,870
this is not going to work in the browser,
64
64
00:02:23,870 --> 00:02:26,163
but it would work in Node.js.
65
65
00:02:27,970 --> 00:02:29,810
So this export keyword here,
66
66
00:02:29,810 --> 00:02:31,400
is basically an object
67
67
00:02:31,400 --> 00:02:34,800
that again, is of course not defined here
68
68
00:02:34,800 --> 00:02:36,060
in our code,
69
69
00:02:36,060 --> 00:02:38,210
and also not in the browser.
70
70
00:02:38,210 --> 00:02:39,440
But in Node.js,
71
71
00:02:39,440 --> 00:02:41,100
it is an important object,
72
72
00:02:41,100 --> 00:02:42,700
that is used.
73
73
00:02:42,700 --> 00:02:45,720
Now then to import something,...
74
74
00:02:45,720 --> 00:02:47,520
And that's just right this here.
75
75
00:02:47,520 --> 00:02:48,830
So export,
76
76
00:02:48,830 --> 00:02:49,693
and import.
77
77
00:02:50,610 --> 00:02:52,690
And so this code is not for you to write.
78
78
00:02:52,690 --> 00:02:55,120
I just want to show this to you.
79
79
00:02:55,120 --> 00:02:57,460
So if we didn't want it to import this,
80
80
00:02:57,460 --> 00:02:59,170
would be pretty similar,
81
81
00:02:59,170 --> 00:03:01,593
to ES Modules actually,
82
82
00:03:02,500 --> 00:03:03,610
but then from here,
83
83
00:03:03,610 --> 00:03:07,060
we will call a require function.
84
84
00:03:07,060 --> 00:03:08,293
So just like this.
85
85
00:03:12,660 --> 00:03:13,780
So again, require
86
86
00:03:13,780 --> 00:03:15,690
is of course not defined,
87
87
00:03:15,690 --> 00:03:17,870
here in our browser environment,
88
88
00:03:17,870 --> 00:03:19,980
but it is defined in Node.js,
89
89
00:03:19,980 --> 00:03:21,230
because this is part
90
90
00:03:21,230 --> 00:03:23,423
of the CommonJS specification.
91
91
00:03:27,254 --> 00:03:29,220
And that's actually all I had to show you,
92
92
00:03:29,220 --> 00:03:30,810
even though this is, of course,
93
93
00:03:30,810 --> 00:03:33,120
just scratching the surface.
94
94
00:03:33,120 --> 00:03:34,720
But all I wanted to do here,
95
95
00:03:34,720 --> 00:03:36,380
is to just let you know,
96
96
00:03:36,380 --> 00:03:38,620
that there are different module systems,
97
97
00:03:38,620 --> 00:03:40,010
and that CommonJS,
98
98
00:03:40,010 --> 00:03:41,800
is particularly important,
99
99
00:03:41,800 --> 00:03:44,570
in the world of JavaScript.
100
100
00:03:44,570 --> 00:03:45,870
Now in the long run,
101
101
00:03:45,870 --> 00:03:47,160
ES6 Modules,
102
102
00:03:47,160 --> 00:03:48,610
will hopefully,
103
103
00:03:48,610 --> 00:03:49,760
and probably,
104
104
00:03:49,760 --> 00:03:52,950
replace all of these different module systems.
105
105
00:03:52,950 --> 00:03:54,270
But it's still gonna be
106
106
00:03:54,270 --> 00:03:56,880
a long way until you're there.
107
107
00:03:56,880 --> 00:03:58,050
And so it's good
108
108
00:03:58,050 --> 00:03:59,330
that at least you know,
109
109
00:03:59,330 --> 00:04:00,660
what is (indistinct),
110
110
00:04:00,660 --> 00:04:02,480
when you stumble upon
111
111
00:04:02,480 --> 00:04:03,980
the syntax in the future,
112
112
00:04:03,980 --> 00:04:04,813
in your work.
113
113
00:04:06,520 --> 00:04:07,353
And with this,
114
114
00:04:07,353 --> 00:04:08,186
let's move on,
115
115
00:04:08,186 --> 00:04:10,110
to the rest of the section,
116
116
00:04:10,110 --> 00:04:11,210
where we will learn
117
117
00:04:11,210 --> 00:04:14,550
how to use third party packages from npm,
118
118
00:04:14,550 --> 00:04:17,110
how to bundle all modules together,
119
119
00:04:17,110 --> 00:04:19,810
and also how to transpile or code back,
120
120
00:04:19,810 --> 00:04:21,350
to ES 5,
121
121
00:04:21,350 --> 00:04:22,473
for old browsers.
8813
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.