1
00:00:00,800 --> 00:00:05,450
We are able to bundle, react and react, Dom, but whenever we do, we're seeing a little warning message

2
00:00:05,660 --> 00:00:09,960
from yes, as defined process node in the when bundling for the browser.

3
00:00:10,370 --> 00:00:12,860
It'd be nice to make this little warning message go away.

4
00:00:13,340 --> 00:00:18,170
I'm going to just kind of assume that you might be familiar with what this warning message is all about.

5
00:00:18,410 --> 00:00:21,860
If you're not familiar with it, I would encourage you to just do a very quick Google search on the

6
00:00:21,860 --> 00:00:22,550
warning itself.

7
00:00:22,700 --> 00:00:26,150
And you'll see a lot of articles that say, hey, here's what this warning is all about.

8
00:00:26,660 --> 00:00:33,770
Essentially, all we have to do is set up it's build to define the value of process and node envy whenever

9
00:00:33,770 --> 00:00:35,190
we are doing this bundling stuff.

10
00:00:35,780 --> 00:00:39,350
This is very well supported inside of s built very quickly.

11
00:00:39,350 --> 00:00:42,950
Go back to the build documentation and then over here.

12
00:00:44,080 --> 00:00:50,860
On the built section, I'll go down a little bit and there's an option right here for define define

13
00:00:50,860 --> 00:00:56,140
allows us to define essentially a value inside of code whenever we are doing this bundling process.

14
00:00:56,750 --> 00:01:01,870
So in this example, they have right here, if there is any variable inside the code that we're bundling

15
00:01:01,870 --> 00:01:02,950
of debug.

16
00:01:02,960 --> 00:01:08,920
So if there's a variable that says debug that value or that variable will be replaced with the hardcoded

17
00:01:08,920 --> 00:01:15,490
value of true, instead you can see that in this case, the JavaScript that they are attempting to bundle

18
00:01:15,490 --> 00:01:17,590
is debug and require Hooke's.

19
00:01:17,860 --> 00:01:21,700
They then attempt to do the bundle or really in this case, they're doing a transformer transpired.

20
00:01:23,130 --> 00:01:29,280
Wherever debug is found right there, it will be replaced with true yes, build will also attempt to

21
00:01:29,280 --> 00:01:32,180
do a little bit of almost kind of like code execution.

22
00:01:32,190 --> 00:01:37,440
It's not quite executing your code, but it's going to say if you have true right there and require

23
00:01:37,440 --> 00:01:44,100
Hoke's well, true and require hooks would resolve 100 percent of the time to be just require hooks.

24
00:01:44,470 --> 00:01:47,760
So the output would be what you see right there, just require hooks.

25
00:01:47,760 --> 00:01:49,770
And that entire debug statement has gone away.

26
00:01:50,430 --> 00:01:52,290
You can also see the opposite down here as well.

27
00:01:52,440 --> 00:01:58,110
If DEBUG were to be set to false, we would have false and require hooks, require hooks would never

28
00:01:58,110 --> 00:01:58,980
be executed.

29
00:01:59,100 --> 00:02:01,290
So the resulting code would be simply false.

30
00:02:01,290 --> 00:02:02,550
And that's what we get out right there.

31
00:02:03,000 --> 00:02:05,630
If all this stuff is confusing, don't sweat it.

32
00:02:05,640 --> 00:02:07,920
This is just a little technicality around building a bundle.

33
00:02:08,130 --> 00:02:12,660
Again, you can take a look at some documentation if you Google that warning message right there.

34
00:02:12,660 --> 00:02:14,460
And we'll tell you a little bit more about all this stuff.

35
00:02:15,860 --> 00:02:20,450
So all we really have to do is set up this define option when we are bundling our code and make sure

36
00:02:20,450 --> 00:02:24,800
that we define this process N.V. node in value, that's it.

37
00:02:25,550 --> 00:02:26,960
So to do that, I'm going to go backward.

38
00:02:26,960 --> 00:02:32,350
My editor are actual bundling is occurring, remember, inside of our index file.

39
00:02:33,110 --> 00:02:34,820
So here's where we do that bundle step.

40
00:02:35,960 --> 00:02:37,610
That is inside the unclick function.

41
00:02:38,780 --> 00:02:43,910
So right after our plug and stuff, I'm going to add in a defined section, we're going to put in a

42
00:02:43,910 --> 00:02:46,190
string key right here of process.

43
00:02:47,230 --> 00:02:54,760
N.V. Noad, M.V. And remember, process has one seed inside of it, should not have processed just one

44
00:02:54,760 --> 00:02:55,030
seed.

45
00:02:56,560 --> 00:03:01,930
And we're going to put in a value that has to be a string of production if we put in just production

46
00:03:02,140 --> 00:03:08,440
that will replace any instance of Process N.V. with the word production or like the variable production,

47
00:03:08,440 --> 00:03:10,290
we don't want to replace it with a variable of production.

48
00:03:10,300 --> 00:03:12,310
We want to replace it with a string of production.

49
00:03:12,860 --> 00:03:17,490
So I'm going to wrap this string right here inside with a set of double quotes as well.

50
00:03:18,010 --> 00:03:23,800
That means whenever we find that string inside of our code or replace it with that right there, replace

51
00:03:23,800 --> 00:03:25,300
it with a string of production.

52
00:03:26,860 --> 00:03:34,480
We're also going to do this for one other value as well, if we ever find the variable lobal inside

53
00:03:34,480 --> 00:03:34,990
of our code.

54
00:03:35,230 --> 00:03:39,500
We're going to replace it with window to this right here is just a very similar step.

55
00:03:39,820 --> 00:03:41,530
This is done automatically by Web.

56
00:03:41,890 --> 00:03:47,050
There are actually many different NPM modules that you probably already install and make use of where

57
00:03:47,050 --> 00:03:49,550
this substitution is done for you by Web pack.

58
00:03:49,780 --> 00:03:54,040
And these different modules do not work correctly if you are trying to refer to global.

59
00:03:54,430 --> 00:03:57,100
So just a little kind of bookkeeping thing right there.

60
00:03:57,340 --> 00:03:59,680
If you didn't, I know you might be.

61
00:03:59,680 --> 00:04:03,160
As you're watching this video, you might always be kind of curious of how in the world would I ever

62
00:04:03,160 --> 00:04:03,910
figure that out?

63
00:04:04,180 --> 00:04:08,560
Well, pretty much the way you would figure this out is eventually as you start to bundle some other

64
00:04:08,560 --> 00:04:13,090
modules, you might bundle eventually some module that says, hey, keyword global is not defined or

65
00:04:13,090 --> 00:04:14,490
this variable is not defined.

66
00:04:14,860 --> 00:04:19,570
And so you would say, hey, there, for some reason a reference to global inside of my code, Google

67
00:04:19,570 --> 00:04:20,920
that message or something like that.

68
00:04:20,920 --> 00:04:24,220
And eventually you would stumble across something that says, oh yeah, if you're bundling your code,

69
00:04:24,220 --> 00:04:28,870
you need to replace any instance of a variable of global with window if you're trying to run this code

70
00:04:28,870 --> 00:04:29,580
inside the browser.

71
00:04:30,400 --> 00:04:31,870
Yes, let's save this.

72
00:04:32,770 --> 00:04:33,460
Refresh.

73
00:04:35,110 --> 00:04:38,050
Submit and no more warning messages.

74
00:04:39,650 --> 00:04:44,900
You will also notice if you Google over this code, that there will no longer be any I said Google,

75
00:04:44,900 --> 00:04:50,570
if you do a search over this code, there will not be any references whatsoever to node underscore envy

76
00:04:50,570 --> 00:04:52,670
because they have all been replaced with production.

77
00:04:53,120 --> 00:04:57,950
And even if you search for production, you might not actually see the string or any reference to it

78
00:04:57,950 --> 00:04:58,970
inside of this code.

79
00:04:59,440 --> 00:05:04,820
The reason for that is, as we just saw on the defined documentation, yes, build is going to try to

80
00:05:04,820 --> 00:05:09,380
find where there might be some potentially unreachable code and automatically print it out.

81
00:05:09,950 --> 00:05:13,250
Just to show this to you really quickly, let's comment out that.

82
00:05:13,250 --> 00:05:14,120
Define right there.

83
00:05:15,370 --> 00:05:16,000
Save it.

84
00:05:17,580 --> 00:05:18,570
Run our code again.

85
00:05:19,530 --> 00:05:20,010
Bundle.

86
00:05:20,940 --> 00:05:25,200
I'm going to do another search on here for production, and now you'll notice that we do, in fact,

87
00:05:25,200 --> 00:05:27,210
have a couple of different checks for production.

88
00:05:27,870 --> 00:05:32,970
So when we do that, define that right there is going to be replaced with a string of production.

89
00:05:33,340 --> 00:05:36,480
So the hardcoded string production is built is going to see that.

90
00:05:36,480 --> 00:05:39,420
We're trying to see if production is not equal to production.

91
00:05:39,420 --> 00:05:40,920
And it's going to say, well, of course, it's equal.

92
00:05:40,930 --> 00:05:43,740
So it's going to do potentially some pruning of all this code.

93
00:05:44,640 --> 00:05:49,890
OK, that's enough information, all this stuff and why we are putting to find inside there, let's

94
00:05:49,890 --> 00:05:52,830
save this with that uncommented, good improvement.

95
00:05:52,860 --> 00:05:54,090
We don't have those warnings anymore.

96
00:05:54,480 --> 00:05:57,930
Let's take a pause right here and start making some more improvements in just a moment.