1
00:00:01,030 --> 00:00:04,990
Trainspotting is working correctly, so now we need to start thinking about bundling as well.

2
00:00:05,410 --> 00:00:09,970
Let's first begin by taking a look at the easy build documentation and see if it gives us any hints

3
00:00:09,970 --> 00:00:11,710
on how we can bundle inside the browser.

4
00:00:12,630 --> 00:00:18,000
All right, so over at the spill documentation, which you can find that it's billed GitHub, I I'm

5
00:00:18,000 --> 00:00:21,720
going to find the API section on the left hand side and go to transform API.

6
00:00:22,550 --> 00:00:25,630
This is what we are currently using, no chance for means transpired.

7
00:00:26,360 --> 00:00:29,060
The documentation here says this works great.

8
00:00:29,060 --> 00:00:34,520
If you have a single string of code without access to a file system and you probably want to use this

9
00:00:34,520 --> 00:00:39,590
function if you're in a files or environment without a file system such as a browser.

10
00:00:40,190 --> 00:00:45,380
So the documentation is very clear that you really only want to use this transform API if you're in

11
00:00:45,380 --> 00:00:45,890
the browser.

12
00:00:46,370 --> 00:00:48,320
But we're saying, hey, you know what, it's build.

13
00:00:48,690 --> 00:00:49,390
I don't care.

14
00:00:49,670 --> 00:00:52,160
I want to use the entire build API.

15
00:00:53,080 --> 00:00:59,860
Inside the browser, but this build API very much relies upon there being a file system present.

16
00:01:00,220 --> 00:01:01,120
Let me show you why.

17
00:01:02,700 --> 00:01:07,350
OK, so at some point in time, we're going to be running Eskild inside the browser, we're going to

18
00:01:07,350 --> 00:01:11,970
feed us, build some code like this right here, something that says import react from react.

19
00:01:12,420 --> 00:01:17,640
We're going to feed it into s build and tell it that we want it to both transpire and bundle that code.

20
00:01:18,210 --> 00:01:23,160
S build, in theory, is going to turn right back around to us and say, hey, sure, I can transport

21
00:01:23,280 --> 00:01:24,090
and bundle this thing.

22
00:01:24,690 --> 00:01:26,130
It's going to start to look at this code.

23
00:01:26,130 --> 00:01:28,920
It's going to say, oh, we're trying to import something called react.

24
00:01:29,250 --> 00:01:36,270
I better look at the file system and try to find some dependancy installed called react.

25
00:01:36,640 --> 00:01:41,640
So at some point in time, the default implementation of a build during this bundling process, whenever

26
00:01:41,640 --> 00:01:46,350
it sees an important statement like this, it's going to try to look at the file system and find whatever

27
00:01:46,350 --> 00:01:47,570
dependencies we are looking for.

28
00:01:47,970 --> 00:01:51,030
But remember, we are operating inside the browser.

29
00:01:51,480 --> 00:01:58,110
Your browser has no file system and it has no access to the underlying file system on your computer.

30
00:01:58,410 --> 00:01:59,910
It kind of has access.

31
00:02:00,180 --> 00:02:02,790
You can drag and drop files into the browser.

32
00:02:02,940 --> 00:02:05,250
You can save files to your file system.

33
00:02:05,490 --> 00:02:11,670
But we can't write out JavaScript code that just starts to look around to into random files on a user's

34
00:02:11,670 --> 00:02:13,020
hard drive from the browser.

35
00:02:13,680 --> 00:02:18,810
So as soon as this build starts to look around for this react module, it's immediately going to throw

36
00:02:18,810 --> 00:02:23,340
an error and say, hey, there's no file system here, how am I supposed to find react?

37
00:02:24,030 --> 00:02:28,650
So as it stands right now, we cannot use e build to do any bundling.

38
00:02:30,030 --> 00:02:34,290
Now, we did kind of discuss this a little bit ago, remember, we looked at a diagram just like this,

39
00:02:34,830 --> 00:02:38,590
we had said and we looked at this diagram when we were still considering Webberley.

40
00:02:39,640 --> 00:02:43,750
In the scenario when we were saying that we going to try running everything inside of a reactor application,

41
00:02:44,020 --> 00:02:47,650
we had said that we would have some code, throw it into WABAC or Eskild or whatever.

42
00:02:48,460 --> 00:02:50,080
It would then find an import statement.

43
00:02:50,200 --> 00:02:55,390
And at that point in time, we would try to write a plugin or something like that to fetch the individual

44
00:02:55,390 --> 00:02:58,450
file that we were looking for from the NPM registry directly.

45
00:02:58,960 --> 00:03:00,820
We would feed that back into our bundler.

46
00:03:00,850 --> 00:03:01,690
At the time, it was Web.

47
00:03:01,930 --> 00:03:05,680
Now we're saying it's Eskild and it could use that to build up the bundle.

48
00:03:06,200 --> 00:03:08,160
So that's essentially what you and I need to do here.

49
00:03:08,470 --> 00:03:13,710
We need to kind of hijack this entire process of allowing Eskild to look up dependencies.

50
00:03:14,020 --> 00:03:16,150
We don't want us built to look up dependencies.

51
00:03:16,150 --> 00:03:20,860
We don't want it to try to look at a file system and find stuff like react instead.

52
00:03:20,860 --> 00:03:23,770
We want to intercept that and tell it you're wait.

53
00:03:23,770 --> 00:03:24,070
Yes.

54
00:03:24,070 --> 00:03:24,400
Build.

55
00:03:24,410 --> 00:03:24,880
No, no, no.

56
00:03:24,880 --> 00:03:26,380
Don't try to look at the file system.

57
00:03:26,710 --> 00:03:28,390
We will take care of this for you.

58
00:03:28,690 --> 00:03:30,450
We are going to reach out to NPM.

59
00:03:30,460 --> 00:03:33,460
We're going to find the file you're looking for and give it right back to you.

60
00:03:33,460 --> 00:03:34,840
So don't look at the file system.

61
00:03:35,820 --> 00:03:39,120
Let's take a look at this entire process in a little bit more involved diagram.

62
00:03:40,000 --> 00:03:42,190
So this is what we really want to have happen.

63
00:03:43,630 --> 00:03:48,640
Whenever we tried to what transpired and bundle something like this right here, yes, Bill is going

64
00:03:48,640 --> 00:03:51,640
to start to say, OK, I can definitely transport and bundle this.

65
00:03:51,820 --> 00:03:55,780
And the first thing it's going to do is try to figure out what path on the file system it should look

66
00:03:55,780 --> 00:03:57,160
at to find react.

67
00:03:58,120 --> 00:04:03,010
In a typical application, if we are running this on our actual filesystem or inside of a kind of node

68
00:04:03,010 --> 00:04:07,830
environment, it might first try to find this react module by looking inside the node modules directory.

69
00:04:08,290 --> 00:04:11,290
So we want to, again, just intercept that entire process.

70
00:04:11,680 --> 00:04:12,650
So we're going to jump in there.

71
00:04:12,700 --> 00:04:14,050
We're going to say, hey, let's build.

72
00:04:14,470 --> 00:04:15,680
You're doing the bundling.

73
00:04:15,700 --> 00:04:16,570
We know you're busy.

74
00:04:16,810 --> 00:04:20,829
Let us figure out what path you should look at to find react.

75
00:04:21,430 --> 00:04:24,760
So we're going to write a plug in that just hijacks that process.

76
00:04:25,420 --> 00:04:31,270
Whenever SBL tries to find a path for react, you and I are going to reach out to the NPM registry or

77
00:04:31,270 --> 00:04:32,020
something similar.

78
00:04:32,320 --> 00:04:35,410
And we're going to say, hey, NPM, how do we find the URL for react?

79
00:04:35,410 --> 00:04:37,330
How do we get at the source code for react?

80
00:04:37,330 --> 00:04:38,920
Because our bundler needs it.

81
00:04:39,490 --> 00:04:43,810
NPM hopefully is going to respond to us with a URL where we can find the source code for react.

82
00:04:44,140 --> 00:04:49,090
We're going to take that URL and just provide it directly back into us, build and say, you know what,

83
00:04:49,090 --> 00:04:55,270
instead of the file system, look at this URL and use that URL to try and find the source code for react.

84
00:04:56,530 --> 00:04:58,000
That's it, that's what we need to do.

85
00:04:59,270 --> 00:05:04,670
Now, I know this all is quite complicated, it really is, but just, you know, doing bundling inside

86
00:05:04,670 --> 00:05:07,090
the browser is actually kind of notoriously difficult.

87
00:05:07,340 --> 00:05:11,930
There are not really any off the shelf solutions right now to make bundling in the browser a very easy

88
00:05:11,930 --> 00:05:12,470
process.

89
00:05:12,710 --> 00:05:17,870
Any time that you use a lot of online tools like, say, Code Sandbox, which actually used to do bundling

90
00:05:17,870 --> 00:05:22,580
inside the browser, there is a tremendous amount of custom code that went into that directly getting

91
00:05:22,580 --> 00:05:28,060
off kind of easy here by being able to use its build and just write a relatively small amount of code.

92
00:05:28,070 --> 00:05:29,330
You implement this process here.

93
00:05:29,600 --> 00:05:33,800
So even though this might seem really crazy, trust me, things could be way worse when it comes to

94
00:05:33,800 --> 00:05:34,850
bundling in the browser.

95
00:05:35,740 --> 00:05:39,400
OK, so I think we've now got a slightly better idea of what we need to do.

96
00:05:39,790 --> 00:05:43,870
So I think it's pretty obvious that the next big challenge here is figuring out how we are going to

97
00:05:43,870 --> 00:05:50,770
somehow reach out to the NPM registry and get the URL or some address of where to find any or just about

98
00:05:50,770 --> 00:05:53,400
any dependency that is hosted on NPM.

99
00:05:54,100 --> 00:05:56,140
So start to figure that out in the next video.