1
00:00:01,430 --> 00:00:05,990
Well, we've repeated this several times, we need to somehow intercept us, build when it's trying

2
00:00:05,990 --> 00:00:10,190
to figure out what path something like REACT is at on your local filesystem.

3
00:00:10,760 --> 00:00:15,170
So to take care of all this stuff we've been talking about intercepting e-mails, attempt to figure

4
00:00:15,170 --> 00:00:20,600
out the path and actually loading up the file, we are going to create and build plug in in the lecture

5
00:00:20,600 --> 00:00:21,460
right before this one.

6
00:00:21,470 --> 00:00:24,550
You should have found a text lecture with a little bit of code inside of it.

7
00:00:24,890 --> 00:00:29,630
That is a very quick demonstration plug in that we're going to use to better understand how plugins

8
00:00:29,630 --> 00:00:31,160
work inside of s built.

9
00:00:31,820 --> 00:00:33,500
So let's make use that code right away.

10
00:00:33,500 --> 00:00:34,850
Back inside of our code editor.

11
00:00:35,060 --> 00:00:39,320
We're going to wire up that plug in, make a couple of other quick changes to our project and then start

12
00:00:39,320 --> 00:00:41,480
to see this entire process in action.

13
00:00:42,770 --> 00:00:47,330
All right, so back inside my editor, I'll find the Sarsae directory, I'm going to create a new folder

14
00:00:47,330 --> 00:00:54,590
inside their old plugins and inside that, I'll make a new file called Unpackaged Path.

15
00:00:55,240 --> 00:00:56,930
Again, that's.

16
00:00:58,060 --> 00:01:03,190
Then inside of this file, we're going to paste everything that you just got inside of the last text

17
00:01:03,190 --> 00:01:07,210
lecture, but all that stuff inside there, you should have something that looks like this.

18
00:01:08,910 --> 00:01:13,110
Once you've tasted all that stuff in, we're going to save this, we are going to very quickly come

19
00:01:13,110 --> 00:01:16,640
back to this file into a very deep dive on what's happening inside of here.

20
00:01:16,980 --> 00:01:21,210
But right now, I'm going to close this file and go back over to my index DOT TSX.

21
00:01:22,210 --> 00:01:27,370
Inside of here, we're then going to make a couple of changes specifically around this transform line.

22
00:01:27,760 --> 00:01:31,720
Remember, transform really means trans people in the world of build.

23
00:01:32,270 --> 00:01:36,880
We're going to change this, transform into a build or bundle process instead.

24
00:01:37,720 --> 00:01:42,430
So for that, I'm going to delete the existing line that we've got there and I'm going to replace it

25
00:01:42,430 --> 00:01:48,940
with the result is a wait ref dot current dot build.

26
00:01:50,060 --> 00:01:57,020
The first argument is going to be an object, I'm going to provide a entry points property that's going

27
00:01:57,020 --> 00:01:59,930
to be an array that has a string of indexed JS inside of it.

28
00:02:00,200 --> 00:02:03,050
And we're going to add in just a couple of other properties very quickly.

29
00:02:03,660 --> 00:02:05,230
I'm going to put in a bundle.

30
00:02:05,240 --> 00:02:05,780
True.

31
00:02:06,850 --> 00:02:08,289
Right, false.

32
00:02:09,650 --> 00:02:10,820
And then plug ins.

33
00:02:12,170 --> 00:02:17,570
It's going to be an array and inside that array, I'm going to add in unpackaged have plug in.

34
00:02:19,100 --> 00:02:20,510
And then call it like a function.

35
00:02:21,690 --> 00:02:26,580
This unpackaged path plugin is the thing that we just pasted into that other file, so let's import

36
00:02:26,580 --> 00:02:30,390
that into indexed TSX very quickly up at the very top.

37
00:02:30,900 --> 00:02:34,890
I'm going to add in an import statement for Unpackaged at again.

38
00:02:35,970 --> 00:02:39,480
From Leganes Unpackaged Path plugin.

39
00:02:44,710 --> 00:02:51,250
So back down where we were working just a moment ago, I'm going to very quickly add in a log of results

40
00:02:51,550 --> 00:02:53,650
and see what comes out of the bundling process.

41
00:02:54,620 --> 00:02:57,110
So let's save this, then go back over to our browser.

42
00:02:58,210 --> 00:02:59,780
I'm going to make sure I refresh the page.

43
00:03:00,400 --> 00:03:03,490
We do not have to add in any code to the text area for right now.

44
00:03:03,700 --> 00:03:09,550
The plug in that I just gave you a moment to go has some hard coded code values inside of it so we can

45
00:03:09,550 --> 00:03:14,950
just directly click on Submit and immediately start to see a couple of different console logs appear.

46
00:03:15,790 --> 00:03:17,890
The results of the entire bundling process.

47
00:03:17,890 --> 00:03:19,620
It's the very last console log.

48
00:03:19,810 --> 00:03:21,880
I want to focus on just that line for just a moment.

49
00:03:22,210 --> 00:03:26,320
If I expand that, I'll see a property inside of here called Output Files.

50
00:03:26,630 --> 00:03:28,030
That is an array of objects.

51
00:03:28,330 --> 00:03:30,160
Let's take a look at that and see what's inside there.

52
00:03:30,880 --> 00:03:33,370
Here's the very, very first element inside that array.

53
00:03:33,880 --> 00:03:39,520
You'll notice, unfortunately, there is a contents property inside of here, which presumably is like

54
00:03:39,520 --> 00:03:43,390
the actual contents or the output of whatever we got out of that bundling process.

55
00:03:43,960 --> 00:03:45,940
It looks like it's some array of numbers.

56
00:03:46,360 --> 00:03:48,100
That is some raw data inside there.

57
00:03:48,250 --> 00:03:51,940
And those raw numbers are those numbers represent actual text characters.

58
00:03:52,420 --> 00:03:56,740
You will notice, however, that there's also this text property right here and there's a little dot,

59
00:03:56,740 --> 00:03:57,790
dot, dot right next to it.

60
00:03:58,120 --> 00:04:03,220
If I click on that, it will turn into the actual code that has come out of our bundling process.

61
00:04:03,580 --> 00:04:05,460
And that actually looks pretty good right there.

62
00:04:05,830 --> 00:04:10,930
Let's try printing that up onto the screen and then do kind of a deeper look at what came out of all

63
00:04:10,930 --> 00:04:11,860
this bundling stuff.

64
00:04:12,780 --> 00:04:14,160
So back inside, my editor.

65
00:04:15,450 --> 00:04:17,110
I'm going to find results right here.

66
00:04:17,130 --> 00:04:26,760
I'm going to iron out that log for just a moment and I'm going to update set code to result output files.

67
00:04:27,480 --> 00:04:29,160
We'll take a look at that first object.

68
00:04:29,700 --> 00:04:32,160
And I'm going to take a look at the text property.

69
00:04:33,560 --> 00:04:36,890
I'll then save this, I'm going to flip back to the browser again.

70
00:04:37,740 --> 00:04:38,790
And then click on Submit.

71
00:04:39,700 --> 00:04:45,370
And there's our code that is the output of the bundling process, so you should kind of take this as

72
00:04:45,730 --> 00:04:51,340
kind of vaguely proof that we can get us build bundling and working successfully inside the browser.

73
00:04:51,580 --> 00:04:55,600
But obviously, at this point in time, I give you that plug in that has a lot of mysterious code inside

74
00:04:55,600 --> 00:04:55,850
of it.

75
00:04:56,260 --> 00:05:01,090
In addition, we have not actually done anything with unpackaged we have not attempted to go and fetch

76
00:05:01,090 --> 00:05:04,540
any modules or resolve any parts or anything like that stuff.

77
00:05:04,570 --> 00:05:08,140
Right now with this plug in, I really just want to get you more familiar with plug ins in general,

78
00:05:08,140 --> 00:05:13,210
how they work and show you a little bit more about how this output bundle is being generated.

79
00:05:13,720 --> 00:05:18,400
So let's take a pause right here and start to do a deeper dive on some of these other console logs and

80
00:05:18,400 --> 00:05:20,620
the real output from our bundling process.