1
00:00:00,640 --> 00:00:02,390
OK, a lot of stuff to figure out here.

2
00:00:02,440 --> 00:00:03,420
Let's get to it.

3
00:00:03,670 --> 00:00:06,830
I'm going to first begin inside of my code editor inside of here.

4
00:00:06,850 --> 00:00:12,310
I'm going to find out unpackaged path plug in file that I gave you just a moment to go inside of here

5
00:00:12,310 --> 00:00:15,070
is a function declaration that returns an object.

6
00:00:15,490 --> 00:00:18,820
This object is a plugin that works inside of its built.

7
00:00:19,240 --> 00:00:22,360
Now we're learning about making plug ins for E build.

8
00:00:22,540 --> 00:00:25,540
And you might have not even heard of s build before this course.

9
00:00:25,990 --> 00:00:28,330
So you might think, hey, this is going to useless knowledge.

10
00:00:28,750 --> 00:00:29,260
Don't sweat.

11
00:00:29,260 --> 00:00:34,300
It turns out that all these different plug ins work very similarly in the world of Web hack as well.

12
00:00:34,690 --> 00:00:38,620
So all the knowledge you're picking up right now, you can eventually apply to other bundling frameworks.

13
00:00:38,980 --> 00:00:40,780
Trust me, this is pretty valuable stuff.

14
00:00:41,890 --> 00:00:46,300
All right, so again, we've got this object being returned, it has two different properties, a name

15
00:00:46,300 --> 00:00:51,640
property and a set up function, the name property is really just for debugging purposes.

16
00:00:52,060 --> 00:00:55,870
You might eventually have several different plug ins working inside of your project, and you might

17
00:00:55,870 --> 00:00:58,690
need to debug how they are all interacting with each other.

18
00:00:58,990 --> 00:01:02,780
And during that process, just to make identifying these different plug ins a little bit easier.

19
00:01:03,250 --> 00:01:06,080
This name property will be printed out by its built.

20
00:01:06,550 --> 00:01:10,060
So beyond that, we don't really care about the name property quite so much.

21
00:01:11,030 --> 00:01:16,340
The other property, however, the setup function, that is what we very much care about, this set

22
00:01:16,340 --> 00:01:21,890
of function is going to be called automatically by its build with a single argument and we call it build.

23
00:01:22,490 --> 00:01:28,340
This build argument right here represents the bundling process, the entire process of finding some

24
00:01:28,340 --> 00:01:33,830
file, loading it up, parsing it, transpiring it, and then joining a bunch of different files together

25
00:01:34,520 --> 00:01:40,940
so we can kind of interact or interfere or override certain parts that bundling process by working with

26
00:01:40,940 --> 00:01:42,020
this build argument.

27
00:01:42,770 --> 00:01:49,160
The two primary ways in which we interact with this build process is by attaching event listeners to

28
00:01:49,160 --> 00:01:52,340
listen to the unresolved and onload events.

29
00:01:52,920 --> 00:01:56,960
I'm going to describe exactly what these two listeners are all about in just a moment.

30
00:01:57,170 --> 00:02:00,470
But first, let me tell you a little bit more about what this plugin generally does.

31
00:02:01,880 --> 00:02:02,870
All right, quick diagram.

32
00:02:04,380 --> 00:02:10,289
So inside this log-in, I have hardcoded two different kind of imaginary files, and this is why we

33
00:02:10,289 --> 00:02:13,170
did not have to enter in any text manually to that text area.

34
00:02:13,290 --> 00:02:19,050
In the last video when we tried running The Bundler, the two hardcoded files inside of here are an

35
00:02:19,050 --> 00:02:25,350
indexed JS file that contains this code and a message just file that contains that code.

36
00:02:26,180 --> 00:02:28,370
Not exactly hello there, but rather close.

37
00:02:29,290 --> 00:02:33,820
You can very easily see those two files by scrolling down towards the bottom of this plugin, so here

38
00:02:33,820 --> 00:02:38,650
is that imaginary index tags and here is the message as file.

39
00:02:40,120 --> 00:02:45,010
These are currently hard coded into the plugin, we are going to eventually delete these, I only added

40
00:02:45,010 --> 00:02:49,590
them in so we can see some immediate output and really understand what the plugin is doing for us.

41
00:02:50,860 --> 00:02:55,840
The really quickly thinking back to when we were working directly with Westpac just a little bit ago,

42
00:02:56,080 --> 00:03:01,510
remember, we ran Westpac on these two different files and we saw that Westpac kind of wrapped one inside

43
00:03:01,510 --> 00:03:02,320
of a function.

44
00:03:02,330 --> 00:03:04,480
It kind of stored that function inside of an object.

45
00:03:04,660 --> 00:03:10,060
It defined some kind of imaginary Westpac require function that was used to kind of join these two files

46
00:03:10,060 --> 00:03:11,110
together intelligently.

47
00:03:11,970 --> 00:03:16,710
Yes, build works slightly differently, yes, build is a little bit more intelligent when it comes

48
00:03:16,710 --> 00:03:22,680
to stripping out unused code and in general it produces bundles that are a little bit smaller or sometimes

49
00:03:22,680 --> 00:03:25,950
a lot smaller than the bundles that are created by Westpac.

50
00:03:27,090 --> 00:03:29,250
So we can see the output.

51
00:03:30,350 --> 00:03:38,030
Of build's bundling process right here on the screen, this right here is 100 percent working good code

52
00:03:38,240 --> 00:03:42,820
that very much accurately describes what we are trying to do when we bundle these two files together.

53
00:03:43,130 --> 00:03:47,450
In other words, if you look at this code right here and imagine how we would expect this to actually

54
00:03:47,450 --> 00:03:52,880
execute well, all we are really trying to do is define a string of hello there and then log it.

55
00:03:53,150 --> 00:03:56,900
And without a doubt, that is what the output of Eskild build actually does here.

56
00:03:57,410 --> 00:04:03,350
But to accomplish this without defining all those extra helper functions and all that extra stuff that

57
00:04:03,350 --> 00:04:09,110
Westpac did, you'll notice right away that Eskild build is a little bit more streamlined than Webberley.

58
00:04:09,740 --> 00:04:13,460
At the end of the day, all these different bundlers work slightly differently, but as long as they

59
00:04:13,460 --> 00:04:16,610
spit out code that actually works, that is, of course, what we really care about.

60
00:04:18,019 --> 00:04:23,420
OK, so now I want to tell you just a little bit about those two event listeners I mentioned just a

61
00:04:23,420 --> 00:04:23,990
moment ago.

62
00:04:25,270 --> 00:04:30,730
So unresolved and onload, what are these two things all about and what are we going to eventually use

63
00:04:30,730 --> 00:04:31,710
them for, though?

64
00:04:31,780 --> 00:04:32,650
Another quick diagram.

65
00:04:33,500 --> 00:04:37,020
So as we just saw, we've got index dogs and message dogs.

66
00:04:37,490 --> 00:04:42,560
I also want to remind you very quickly that inside of our index TSX file, we had specified an entry

67
00:04:42,560 --> 00:04:44,810
point right here of Index JASE'S.

68
00:04:45,200 --> 00:04:49,940
That means that we want our index dogs file to be the first one to be bundled inside of our application

69
00:04:50,510 --> 00:04:55,340
so we can kind of imagine what is going on behind the scenes with us build inside this diagram.

70
00:04:56,640 --> 00:05:02,280
We essentially told us build that we wanted it to bundle the index, not just file, we did not actually

71
00:05:02,280 --> 00:05:06,360
provide the contents of that file in any way, shape or form directly.

72
00:05:06,660 --> 00:05:11,850
When we started up the bundling process, we just said, please bundle the index file.

73
00:05:13,270 --> 00:05:18,280
Yes, Bill then started up a bundling process inside the browser, it then went through the following

74
00:05:18,280 --> 00:05:19,240
series of steps.

75
00:05:20,020 --> 00:05:26,800
The first thing that it did, it tried to figure out or determine what the path was to get to the index

76
00:05:26,950 --> 00:05:29,410
JS file, in other words, where it is stored.

77
00:05:30,360 --> 00:05:36,690
We refer to this process of figuring out where this file is stored as the unresolved step, that is

78
00:05:36,690 --> 00:05:39,030
what this unresolved function back here.

79
00:05:39,040 --> 00:05:45,840
Does this function right here that we defined essentially overrides or kind of hijacks us, builds a

80
00:05:46,230 --> 00:05:51,000
natural process of trying to figure out where the file is stored or what the actual path to that file

81
00:05:51,000 --> 00:05:51,450
is.

82
00:05:54,520 --> 00:06:00,670
Once that unresolved step was executed, Eskild then took that path that was generated during that step.

83
00:06:00,700 --> 00:06:05,680
That's essentially what we're returning right there and it used that path to attempt to load that file

84
00:06:05,680 --> 00:06:05,890
up.

85
00:06:06,700 --> 00:06:11,770
Whenever Eskild attempts to load up a file, we refer to that as the onload step.

86
00:06:12,220 --> 00:06:14,500
And so that is the other function that was defined inside of here.

87
00:06:14,560 --> 00:06:15,270
It is right here.

88
00:06:15,580 --> 00:06:19,400
Build dot onload by defining this listener right here.

89
00:06:19,420 --> 00:06:22,540
Once again, we have kind of hijacked or overridden.

90
00:06:22,750 --> 00:06:23,110
Yes.

91
00:06:23,110 --> 00:06:27,570
Builds natural way of loading up a file, which is to just read it directly off a file system.

92
00:06:28,120 --> 00:06:30,930
Instead, we said, you know what, you just build, don't sweat it.

93
00:06:30,940 --> 00:06:33,220
Don't try to load up this file off the file system.

94
00:06:33,490 --> 00:06:38,730
We're just going to return an object for you immediately that contains the contents of that file you

95
00:06:38,730 --> 00:06:39,550
were trying to load.

96
00:06:40,240 --> 00:06:45,640
So inside this onload function, we're essentially saying if Eskild is attempting to load the index

97
00:06:45,790 --> 00:06:48,310
JS file, don't let it do its normal thing.

98
00:06:48,400 --> 00:06:51,280
Don't let it try to load up something on the file system instead.

99
00:06:51,490 --> 00:06:53,170
Look, we loaded it for you.

100
00:06:53,460 --> 00:06:54,460
Here it is right here.

101
00:06:55,120 --> 00:06:57,660
Here's the contents of that file that you were looking for.

102
00:06:58,480 --> 00:07:01,450
So we overrode that piece of functionality with our plugin.

103
00:07:02,810 --> 00:07:08,570
Once we returned that file to build through that object that we were just looking at its build then

104
00:07:08,570 --> 00:07:14,420
attempted to pass that file and when it passed it, it tried to find any import statements, any requires,

105
00:07:14,420 --> 00:07:20,620
any exports or anything like that, if it found anything like that inside the index JS file.

106
00:07:20,630 --> 00:07:21,460
And it definitely did.

107
00:07:21,470 --> 00:07:24,050
We've got import message from message right there.

108
00:07:25,350 --> 00:07:30,690
Then it's billed is going to repeat these two steps up here once again for the file that we were trying

109
00:07:30,690 --> 00:07:31,380
to import.

110
00:07:32,350 --> 00:07:38,380
So it's build is going to take that important statement that it found for the messages file and it's

111
00:07:38,380 --> 00:07:43,990
going to once again run the unresolved step, which again is how it is going to try to figure out where

112
00:07:43,990 --> 00:07:46,270
that file exists or what the path to it is.

113
00:07:47,150 --> 00:07:51,070
That means that we would run the unresolved function right here a second time.

114
00:07:51,460 --> 00:07:56,380
This time around, the expectation would be that we return some kind of object describing where that

115
00:07:56,380 --> 00:07:58,330
message, not Jase's file is.

116
00:07:59,570 --> 00:08:05,000
Want to return that object, yes, build, then use that object to attempt to actually load the file

117
00:08:05,000 --> 00:08:05,260
up.

118
00:08:05,600 --> 00:08:08,600
So it said, OK, here's a file, I'm going to try to load it up.

119
00:08:09,530 --> 00:08:14,120
As it tried to load that file up, remember, we referred to that as the onload step and once again

120
00:08:14,150 --> 00:08:17,480
this time we intercepted that OnLoad call.

121
00:08:18,380 --> 00:08:22,850
When we intercepted the call, we said, hey, you know what, if you're trying to find anything besides

122
00:08:22,850 --> 00:08:24,140
the index, just file.

123
00:08:24,470 --> 00:08:25,040
Here it is.

124
00:08:25,040 --> 00:08:25,850
We've got it for you.

125
00:08:25,850 --> 00:08:26,690
It's right here.

126
00:08:27,050 --> 00:08:29,000
Don't try to go to the file system.

127
00:08:29,000 --> 00:08:31,730
Don't try to access the hard drive because that would result in an error.

128
00:08:31,970 --> 00:08:34,169
Instead, here's the code you're looking for.

129
00:08:34,190 --> 00:08:37,250
He has built this is the contents of the messages file.

130
00:08:37,250 --> 00:08:38,150
Just trust us.

131
00:08:38,179 --> 00:08:39,230
This is what it is.

132
00:08:40,539 --> 00:08:45,430
So Eskild took that contents right there and used it to complete the bundling process.

133
00:08:46,500 --> 00:08:51,870
OK, so that's a deep dive on what is going on behind the scenes with Eskild and how that plug in kind

134
00:08:51,870 --> 00:08:53,200
of interfaces with it.

135
00:08:53,670 --> 00:08:58,050
So, again, the really critical things here to understand is that there is an unresolved step that

136
00:08:58,050 --> 00:09:03,090
is used to figure out what the actual path is to a particular file inside of a plug in.

137
00:09:03,090 --> 00:09:09,840
If you and I define an unresolved function, we have the ability to override that, assuming we have

138
00:09:09,840 --> 00:09:13,230
the ability to override where Eskild tries to find that file.

139
00:09:13,380 --> 00:09:14,530
And that's exactly what we're doing.

140
00:09:15,360 --> 00:09:21,540
There's also an onload step that onload step is what is used to actually load up a file off the file

141
00:09:21,540 --> 00:09:21,960
system.

142
00:09:22,260 --> 00:09:28,440
And once again, if we define that onload callback inside of a plugin, we're going to override build's

143
00:09:28,590 --> 00:09:31,410
natural process of trying to access the file system.

144
00:09:32,270 --> 00:09:37,010
Both these steps are on resolve and onload are totally critical for us to implement and make sure that

145
00:09:37,010 --> 00:09:42,560
we handle inside of our app, because if we just allow it's built to try to take care of the resolve

146
00:09:42,740 --> 00:09:47,660
or the onload step, we're going to very quickly get an error message because it's build is going to

147
00:09:47,660 --> 00:09:49,550
try to access the file system.

148
00:09:50,280 --> 00:09:52,000
I can prove that to you very easily.

149
00:09:52,550 --> 00:09:56,930
Back inside this plug in, I'm going to find that build on resolve right there.

150
00:09:57,350 --> 00:09:58,490
I'm just going to comment it out.

151
00:09:59,370 --> 00:10:00,620
I'll then save this file.

152
00:10:02,360 --> 00:10:07,100
I'm going to go back to the browser, refresh the page and click on submit and sure enough, very quickly,

153
00:10:07,550 --> 00:10:12,890
we get an error message and it definitely looks kind of like it's something related to a sorry, but

154
00:10:12,890 --> 00:10:14,250
we can't read a directory.

155
00:10:14,300 --> 00:10:15,110
Don't even try.

156
00:10:16,490 --> 00:10:23,480
So only by implementing these two functions on resolve and onload and overriding build's natural behavior

157
00:10:23,600 --> 00:10:26,660
are going to be able to run or create a bundle inside the browser.

158
00:10:28,010 --> 00:10:32,840
All right, so I think we got a better idea of what's going on here, but the one exception, we didn't

159
00:10:32,840 --> 00:10:37,190
really discuss what this filter thing is all about or what the namespace thing is all about.

160
00:10:37,700 --> 00:10:38,810
So let's take a pause right here.

161
00:10:39,150 --> 00:10:43,010
We're going to do a little bit more investigation into what's going on here and then eventually start

162
00:10:43,010 --> 00:10:48,980
to tweak this code to actually work and allow us to import any kind of arbitrary module into our project.