1 00:00:01,170 --> 00:00:03,500 Besides native ES Modules, 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.