1
00:00:01,090 --> 00:00:06,750
All right, my friends, we've now put in a lot of work on on this path resolutions up to now, in theory,

2
00:00:06,790 --> 00:00:13,300
we should be able to require in real modules off of NPM modules like React, Axios, React and so on.

3
00:00:13,820 --> 00:00:18,340
So we're going to spend this video trying to change out the code inside of our hardcoded index, such

4
00:00:18,340 --> 00:00:22,570
as file to requiring some real modules and just make sure they work as expected.

5
00:00:23,110 --> 00:00:24,340
Now, this should work.

6
00:00:24,340 --> 00:00:29,530
Everything we have should work for a lot of modules, but it's not going to work for 100 percent of

7
00:00:29,530 --> 00:00:31,330
all modules hosted on NPM.

8
00:00:31,630 --> 00:00:35,940
They're going to be some modules that are designed only to work inside of a node environment.

9
00:00:36,220 --> 00:00:40,570
They're going to be some other modules that might attempt to require in excess file or maybe a font

10
00:00:40,570 --> 00:00:41,760
file or something like that.

11
00:00:42,010 --> 00:00:45,970
And right now, our code is not set up to work with those different kinds of files.

12
00:00:46,440 --> 00:00:50,830
So in other words, we tibble to require in a lot of different packages off of NPM and have them work

13
00:00:50,830 --> 00:00:55,630
correctly, but not necessarily 100 percent of every last package you can ever possibly think of.

14
00:00:56,080 --> 00:00:57,350
OK, so let's give this a shot.

15
00:00:57,910 --> 00:00:59,890
Remember our indexed outguess file right here.

16
00:00:59,890 --> 00:01:03,190
This is in theory, the code that a user is going to write into our code editor.

17
00:01:03,520 --> 00:01:08,620
It's going to replace that require right there with a required for react and then going to save that

18
00:01:09,140 --> 00:01:10,240
look back over to the browser.

19
00:01:11,560 --> 00:01:13,780
Refresh and submit.

20
00:01:15,170 --> 00:01:20,870
Hey, now that looks good, we do have a couple of warnings inside of here that we find we will fix

21
00:01:20,870 --> 00:01:21,860
those up in just a moment.

22
00:01:22,290 --> 00:01:27,770
But if you take a look, this is all the source code for react bundled into our output.

23
00:01:28,340 --> 00:01:29,990
This is all everything for react.

24
00:01:30,290 --> 00:01:32,540
And if we scroll down all the way to the very bottom.

25
00:01:34,920 --> 00:01:37,860
We'll eventually see the code for our next guest file right there.

26
00:01:39,550 --> 00:01:45,300
For all these logs, these are the different require statements internally inside of reactor itself.

27
00:01:45,750 --> 00:01:51,350
So when we try to just get, say, react, we're going to get the main react entry file.

28
00:01:51,360 --> 00:01:57,960
So something like react index and then that react index file in turn attempts to require other files.

29
00:01:58,350 --> 00:02:02,280
We actually saw this a little bit ago when we were working directly with Westpac.

30
00:02:02,870 --> 00:02:08,820
If I go to unpackaged dot com react, remember we saw this file a little bit ago, so internally react

31
00:02:08,820 --> 00:02:11,250
itself attempts to require in some other file.

32
00:02:11,700 --> 00:02:15,240
So we are seeing that require statement and resolving the require correctly.

33
00:02:17,900 --> 00:02:23,180
So all of these different kinds of blogs right here, these are all the kind of nested requires inside

34
00:02:23,180 --> 00:02:28,670
of reactor itself, you will notice that we are fetching a pretty good number of files here that might

35
00:02:28,670 --> 00:02:31,430
eventually have a pretty big performance impact on our application.

36
00:02:31,730 --> 00:02:35,780
So we might need to figure out some way to maybe reduce the number of requests that we're making over

37
00:02:35,780 --> 00:02:37,610
to Unpackaged at some point in time.

38
00:02:37,950 --> 00:02:44,750
But for before that, let's go back over to our editor and try requiring in some other modules as well.

39
00:02:45,610 --> 00:02:47,890
I'm going to try to get, say, react dumb.

40
00:02:48,700 --> 00:02:49,570
We'll save that.

41
00:02:50,550 --> 00:02:52,020
Refresh Zimet.

42
00:02:55,320 --> 00:02:56,630
You got click submit to zoom out.

43
00:02:56,670 --> 00:02:57,080
There we go.

44
00:02:58,120 --> 00:03:00,490
OK, looks like I was able to bundle, react on.

45
00:03:01,430 --> 00:03:02,330
I'm going to try.

46
00:03:03,450 --> 00:03:04,260
Axios.

47
00:03:05,400 --> 00:03:07,620
Save that refresh.

48
00:03:09,130 --> 00:03:12,880
Yep, looks like we can bundle Axios, there's all the source code for Axios itself.

49
00:03:13,870 --> 00:03:16,780
Maybe just one more, let's try to get, say, Lodish.

50
00:03:17,740 --> 00:03:18,580
We'll save that.

51
00:03:19,540 --> 00:03:20,230
But over.

52
00:03:21,300 --> 00:03:21,840
Simit.

53
00:03:22,750 --> 00:03:25,120
And here's all the source code for Lodish as well.

54
00:03:26,290 --> 00:03:31,570
Well, I'd say this is working pretty darn well now in theory, if we took the output of this bundle

55
00:03:31,720 --> 00:03:34,300
and we were to somehow execute it, we would see.

56
00:03:35,570 --> 00:03:41,210
For example, a console log of Lodish, and we could work with a load library if we were requiring react

57
00:03:41,210 --> 00:03:45,740
or react, Dom or Axios we would be able to work directly with those libraries.

58
00:03:45,960 --> 00:03:49,630
But right now, of course, we are not actually executing the output of this bundle just yet.

59
00:03:50,420 --> 00:03:52,540
One other thing I wanted to test out really quickly.

60
00:03:52,580 --> 00:03:57,170
I just want to make sure that we can actually require in or bundle multiple different modules.

61
00:03:57,680 --> 00:03:59,020
So let's try updating this code.

62
00:03:59,030 --> 00:04:01,790
I'll say contract is require react.

63
00:04:03,050 --> 00:04:06,500
And react, Dom, is react, Dom.

64
00:04:08,260 --> 00:04:13,690
What's going to remove that console will see what lets console react and react, Dom, I believe that

65
00:04:13,690 --> 00:04:17,589
if you do not actually make use of these variables, yes, build might try to strip them out for you

66
00:04:17,589 --> 00:04:19,300
automatically, which we definitely don't want.

67
00:04:19,310 --> 00:04:23,200
So I'm going to put in the console log right here just to make sure that Bill doesn't try to strip these

68
00:04:23,200 --> 00:04:23,740
things out.

69
00:04:24,890 --> 00:04:26,840
Let's go back over Simit.

70
00:04:28,120 --> 00:04:32,920
And after a pretty solid number of requests, yep, we eventually get both react and react together.

71
00:04:33,820 --> 00:04:34,300
All right.

72
00:04:34,300 --> 00:04:35,620
Well, this is looking pretty good.

73
00:04:36,070 --> 00:04:41,260
Last thing I want to test very quickly, just make sure that we can do bundling even if we are using.

74
00:04:41,260 --> 00:04:41,590
Yes.

75
00:04:41,680 --> 00:04:42,920
Module's syntax as well.

76
00:04:42,940 --> 00:04:44,360
So right now we're using --'s.

77
00:04:44,860 --> 00:04:48,370
I'm going to update this to just be about import react.

78
00:04:49,260 --> 00:04:49,980
From React.

79
00:04:51,130 --> 00:04:52,630
I'll update the council log as well.

80
00:04:54,090 --> 00:04:54,780
Save that.

81
00:04:56,140 --> 00:04:59,740
Click, refresh, submit, yep, yes, module Syntex works.

82
00:05:00,910 --> 00:05:07,450
And if we also try to get stuff like, say, a U.S. state hook and I try to console log that as well.

83
00:05:09,850 --> 00:05:11,110
Refresh simit.

84
00:05:13,260 --> 00:05:14,970
Keep on clicking, submit too quickly.

85
00:05:15,000 --> 00:05:15,480
There we go.

86
00:05:16,000 --> 00:05:20,970
Yeah, looks like everything around us module and common JS modules works just fine.

87
00:05:21,950 --> 00:05:23,930
Well, this is a really good step forward.

88
00:05:23,960 --> 00:05:27,770
I'm very pleased, but you will notice that we are getting a couple of little warnings inside of here.

89
00:05:28,010 --> 00:05:29,600
So let's take a quick pause right here.

90
00:05:29,620 --> 00:05:31,070
Figure out how to deal with these warnings.

91
00:05:31,230 --> 00:05:35,210
We're going to make a couple of other improvements to our project to make sure that we're not fetching

92
00:05:35,210 --> 00:05:37,610
a ton of files nonstop from unpackaged.

93
00:05:37,910 --> 00:05:39,910
So we're going to put in a caching layer, essentially.

94
00:05:40,250 --> 00:05:44,450
And after that, I think the last thing we really need to do is figure out how to execute this code.

95
00:05:44,600 --> 00:05:45,860
And it will be just about set.