Original subtitles

1 1

Besides native ES Modules, 2

2

and the module pattern, 3

3

there are also other module systems, 4

4

that have been used 5

5

by JavaScript in the past. 6

6

But again, they were not native JavaScript. 7

7

so they relied on some external implementations. 8

8

And two examples are: 9

9

AMD Modules, 10

10

and CommonJS modules. 11

11

And in fact, CommonJS modules, 12

12

are worth taking a look at. 13

13

And so let's do that now. 14

14

Now CommonJS modules are important for us, 15

15

because they have been used in Node.js, 16

16

for almost all of its existence. 17

17

So only very recently, 18

18

ES Modules have actually been implemented, 19

19

in Node.js. 20

20

And remember, 21

21

Node.js is a way 22

22

of running JavaScript on a web server, 23

23

outside of a browser. 24

24

Now the big consequence of this, 25

25

is that almost all the modules, 26

26

in the npm repository, 27

27

that we talked about 28

28

in the beginning of this section, remember? 29

29

So all these modules 30

30

that we can use in our own code, 31

31

still use the CommonJS module system. 32

32

And the reason for that, 33

33

is that npm was originally 34

34

only intended for node. 35

35

Which as they said, uses commonJS. 36

36

Only later npm became the standard repository, 37

37

for the whole JavaScript world. 38

38

And so now we are basically stuck, 39

39

with CommonJS. 40

40

And so therefore, 41

41

you will see probably, 42

42

a lot of CommonJS still around. 43

43

And so let's take a quick second 44

44

to see what it looks like. 45

45

So let's just pretend 46

46

that we want to export 47

47

something from this module. 48

48

And so let's get, 49

49

a disfunction here again, 50

50

like this. 51

51

All right? 52

52

And so just like ES6 modules, 53

53

in CommonJS, 54

54

one file, is one module. 55

55

And we export something from a module, 56

56

using export.dot, 57

57

and then the name of the export. 58

58

So let's say, 59

59

export.dot (indistinct), 60

60

and then, 61

61

whatever we want to export there. 62

62

Now of course, 63

63

this is not going to work in the browser, 64

64

but it would work in Node.js. 65

65

So this export keyword here, 66

66

is basically an object 67

67

that again, is of course not defined here 68

68

in our code, 69

69

and also not in the browser. 70

70

But in Node.js, 71

71

it is an important object, 72

72

that is used. 73

73

Now then to import something,... 74

74

And that's just right this here. 75

75

So export, 76

76

and import. 77

77

And so this code is not for you to write. 78

78

I just want to show this to you. 79

79

So if we didn't want it to import this, 80

80

would be pretty similar, 81

81

to ES Modules actually, 82

82

but then from here, 83

83

we will call a require function. 84

84

So just like this. 85

85

So again, require 86

86

is of course not defined, 87

87

here in our browser environment, 88

88

but it is defined in Node.js, 89

89

because this is part 90

90

of the CommonJS specification. 91

91

And that's actually all I had to show you, 92

92

even though this is, of course, 93

93

just scratching the surface. 94

94

But all I wanted to do here, 95

95

is to just let you know, 96

96

that there are different module systems, 97

97

and that CommonJS, 98

98

is particularly important, 99

99

in the world of JavaScript. 100

100

Now in the long run, 101

101

ES6 Modules, 102

102

will hopefully, 103

103

and probably, 104

104

replace all of these different module systems. 105

105

But it's still gonna be 106

106

a long way until you're there. 107

107

And so it's good 108

108

that at least you know, 109

109

what is (indistinct), 110

110

when you stumble upon 111

111

the syntax in the future, 112

112

in your work. 113

113

And with this, 114

114

let's move on, 115

115

to the rest of the section, 116

116

where we will learn 117

117

how to use third party packages from npm, 118

118

how to bundle all modules together, 119

119

and also how to transpile or code back, 120

120

to ES 5, 121

121

for old browsers.