1
00:00:01,470 --> 00:00:03,719
Let's move on to a big problem number three.

2
00:00:03,900 --> 00:00:08,760
Let's remember, we want to allow users to write our import statements for JavaScript files and somehow

3
00:00:08,760 --> 00:00:10,680
import them directly off of NPM.

4
00:00:10,920 --> 00:00:14,490
We also want our users to write out access import statements as well.

5
00:00:14,910 --> 00:00:17,420
This is going to be a rather challenging thing to solve.

6
00:00:17,430 --> 00:00:21,810
So we're going to spend a couple of videos getting a lot of background into import statements, JavaScript

7
00:00:21,810 --> 00:00:25,440
modules and stuff like that, and eventually come up with some kind of possible solution.

8
00:00:26,130 --> 00:00:31,010
They're going to first begin with a very quick review on the topic of JavaScript modules.

9
00:00:31,020 --> 00:00:33,000
We're going to understand what JavaScript modules are.

10
00:00:33,540 --> 00:00:39,840
So a module is a file that makes some number of values available to other files inside of our project

11
00:00:40,200 --> 00:00:43,720
and or consumes values from other files.

12
00:00:44,250 --> 00:00:45,450
So very quick example.

13
00:00:45,990 --> 00:00:47,790
In this example, I've got two files.

14
00:00:47,820 --> 00:00:52,080
Message and index messages is a JavaScript module.

15
00:00:52,380 --> 00:00:57,480
It declares a value, in this case a string of hello there and then exports it so that value can be

16
00:00:57,480 --> 00:00:59,490
used by other files inside of my project.

17
00:01:00,910 --> 00:01:08,260
The second module index is consuming or importing a value from another file in this case message, it

18
00:01:08,260 --> 00:01:10,270
imports that value and then councillor's it.

19
00:01:10,960 --> 00:01:17,200
So in this case, I've got one file that is exporting a value, another file that is importing or consuming

20
00:01:17,200 --> 00:01:17,750
a value.

21
00:01:18,460 --> 00:01:21,940
So a module can import and or export values.

22
00:01:23,390 --> 00:01:27,770
Now, there are many different kinds of model systems out there in the world right now, these different

23
00:01:27,770 --> 00:01:33,350
model systems describe different ways of kind of joining together or different ways of declaring which

24
00:01:33,350 --> 00:01:35,330
values we want to share between different files.

25
00:01:35,930 --> 00:01:42,110
Some different model systems are the AMD model system common and s model system.

26
00:01:42,540 --> 00:01:46,150
There are several other model systems as well, but they're not super important for us right now.

27
00:01:47,510 --> 00:01:51,730
The two model systems that were going to focus on inside this course are common, commonplace and its

28
00:01:51,740 --> 00:01:57,140
modules, you can always kind of identify what module system you are using in a given project by taking

29
00:01:57,140 --> 00:02:04,070
a look at how you either import or get access to values from other files or make values available inside

30
00:02:04,070 --> 00:02:05,400
of one file to another one.

31
00:02:05,780 --> 00:02:10,970
So if you ever see a file with stuff like require or module exports, chances are you're using the common

32
00:02:10,970 --> 00:02:11,990
gas module system.

33
00:02:12,590 --> 00:02:18,030
If you ever see a file with stuff like import or export, then chances are you're using its modules.

34
00:02:18,680 --> 00:02:19,970
There is one little caveat to that.

35
00:02:19,970 --> 00:02:23,990
However, it turns out that a lot of transpires out there, namely Babul.

36
00:02:24,290 --> 00:02:29,000
If you feed in something that has import or export statements inside of it, it might automatically

37
00:02:29,000 --> 00:02:32,300
convert those into the equivalent common Syntex.

38
00:02:32,820 --> 00:02:38,870
So if we fed in something like this to Babul, we would get out something that would work with --'s.

39
00:02:39,440 --> 00:02:41,390
We can validate that or check that really quickly.

40
00:02:41,390 --> 00:02:45,430
If we go back over to that Batbold website, Zoback over here.

41
00:02:45,440 --> 00:02:47,000
If I write out something like say.

42
00:02:48,400 --> 00:02:50,080
Import react from react.

43
00:02:51,040 --> 00:02:55,750
You'll notice that although there is a decent amount of code that gets printed out here, there definitely

44
00:02:55,750 --> 00:02:57,120
is a require statement.

45
00:02:57,580 --> 00:03:02,470
So that is kind of a sign or kind of some indication that we're making use of --'s if I put in

46
00:03:02,470 --> 00:03:04,000
something like export default.

47
00:03:04,000 --> 00:03:04,780
One, two, three.

48
00:03:05,950 --> 00:03:11,440
I'm going to see experts right there, vaguely similar to that model experts thing we saw just a moment

49
00:03:11,440 --> 00:03:11,770
ago.

50
00:03:12,910 --> 00:03:17,020
So even though you might think that you're making use of the model system, well, it turns out you

51
00:03:17,020 --> 00:03:20,710
might actually be making use of common G.S. just want to that out there really quickly.

52
00:03:21,790 --> 00:03:26,410
Now, at some point time, once we have all these different module files put together inside of our

53
00:03:26,410 --> 00:03:30,100
project, we need to actually run our code when we want to run our code.

54
00:03:30,100 --> 00:03:34,420
That means that we want to somehow actually exchange values between these different files.

55
00:03:35,080 --> 00:03:38,220
For that, the most popular solution is to use something called a bundler.

56
00:03:38,530 --> 00:03:39,280
So bundler.

57
00:03:39,280 --> 00:03:41,550
Very popular example of one would be Webberley.

58
00:03:41,590 --> 00:03:46,990
Although there are other bundler implementations out there, these bundlers are generally going to take

59
00:03:46,990 --> 00:03:52,120
multiple different modules and combine them all together and somehow link them into one single file.

60
00:03:52,660 --> 00:03:57,250
This bundler will also be responsible for making sure that these different values that are declared

61
00:03:57,250 --> 00:04:01,300
instead of one module actually get communicated over to the other module.

62
00:04:03,130 --> 00:04:05,080
OK, so we can take a quick pause right here.

63
00:04:05,080 --> 00:04:09,280
When we come back, the next video, we're going to start to install Web back onto our local machines

64
00:04:09,280 --> 00:04:10,810
and play around with it a little bit.

65
00:04:11,160 --> 00:04:16,630
We're going to try bundling some very small files and see what Watpac actually does during this bundling

66
00:04:16,630 --> 00:04:17,170
process.

67
00:04:17,750 --> 00:04:20,050
This might seem like it's very off topic, but this course.

68
00:04:20,050 --> 00:04:24,520
But trust me, all this knowledge is super critical for understanding how we're going to eventually

69
00:04:24,520 --> 00:04:26,470
solve problem number three down here.

70
00:04:27,400 --> 00:04:29,550
Let's take a look at Westpac in the next video.