1
00:00:02,070 --> 00:00:03,460
Welcome back, ladies and gentlemen.

2
00:00:03,480 --> 00:00:06,130
In today's lecture, we're going to focus on installing Babel.

3
00:00:06,480 --> 00:00:10,280
Now the work flow is almost complete, right?

4
00:00:10,320 --> 00:00:17,120
So we have to we have managed to do a lot of configurations so far, but this is one of the most important.

5
00:00:17,460 --> 00:00:22,300
And after days, I promise we're going to start doing a real coding.

6
00:00:22,320 --> 00:00:27,300
Now, some of the lectures here are a long but I really don't see that as a problem.

7
00:00:27,300 --> 00:00:28,020
You can pause them.

8
00:00:28,020 --> 00:00:29,370
You can watch them later.

9
00:00:29,590 --> 00:00:30,630
You can do whatever you want.

10
00:00:30,630 --> 00:00:35,210
So I can easily see the lectures before into three or four smellers.

11
00:00:35,520 --> 00:00:41,520
But that's not going to do anything that will not bring down the amount of configuration we need to

12
00:00:41,520 --> 00:00:41,670
do.

13
00:00:41,700 --> 00:00:42,730
We still need to do this.

14
00:00:43,170 --> 00:00:43,980
That's what I'm trying to say.

15
00:00:44,010 --> 00:00:47,760
So after babble, we were ready to start coding.

16
00:00:47,820 --> 00:00:49,700
Now we can jump to the website.

17
00:00:50,130 --> 00:00:56,490
It's called Babble that Geass Dot IIO and you can Google it first.

18
00:00:56,490 --> 00:01:03,480
If you if you can't if you can't see it like it like this, if you can have a result in a battle.

19
00:01:03,480 --> 00:01:07,560
Is a JavaScript compiler use the next generation JavaScript today.

20
00:01:07,890 --> 00:01:09,750
Now Babille seven is out.

21
00:01:10,080 --> 00:01:15,480
And when this was released there were a couple of changes the way we installed the packages.

22
00:01:15,480 --> 00:01:17,910
And here I'm going to show you the new way.

23
00:01:18,120 --> 00:01:21,840
And also I'm going to try to show you the old way right now.

24
00:01:23,490 --> 00:01:26,640
So I strongly recommend you to read the documentation here.

25
00:01:26,640 --> 00:01:34,680
And because you are so far learning everything before we were doing everything like, you know, with

26
00:01:34,680 --> 00:01:36,710
a console, like we just logging things.

27
00:01:36,990 --> 00:01:38,220
Now, this is a little bit different.

28
00:01:38,220 --> 00:01:39,120
This is more advanced.

29
00:01:39,120 --> 00:01:44,850
And I want you, for example, after finishing this part to read the documentation or if it's something

30
00:01:44,850 --> 00:01:51,210
not, for example, some of the commands, they are not working, then you can just Google it out here

31
00:01:51,420 --> 00:01:52,050
in fine.

32
00:01:52,060 --> 00:01:58,320
What's what's what was the change in what was the cause, why they just shut that command down and why

33
00:01:58,320 --> 00:01:59,670
they replace it with something else.

34
00:01:59,850 --> 00:02:04,110
Because you as a developers needs to do this right now.

35
00:02:05,320 --> 00:02:09,780
For now, I'm going to show you the things are done without going through the documentation.

36
00:02:09,780 --> 00:02:14,190
But sometimes you as a developers, you need to start doing this right now.

37
00:02:14,190 --> 00:02:14,880
First things first.

38
00:02:14,880 --> 00:02:16,440
We need to download a couple of packages.

39
00:02:16,740 --> 00:02:19,620
The first packages that we need to install is called Bable Core.

40
00:02:20,040 --> 00:02:26,820
And before so you go to your go to your desktop wherever you put your project there.

41
00:02:26,820 --> 00:02:27,360
The folder.

42
00:02:27,630 --> 00:02:28,020
Right.

43
00:02:28,170 --> 00:02:29,490
I'm just going to zoom in layer here.

44
00:02:29,760 --> 00:02:31,800
So before was like this.

45
00:02:32,760 --> 00:02:38,730
MBM I'm just going to show you ampm so it's not a dramatic change, but it's a little bit change.

46
00:02:38,880 --> 00:02:46,380
So before it was npm install babble, pour in here you can give it the flex save as a dependent development.

47
00:02:46,380 --> 00:02:46,650
Right.

48
00:02:47,280 --> 00:02:57,570
But now it's change and it should be npm install saved f so this actual line can go at the end.

49
00:02:57,690 --> 00:02:59,370
But this is how they do it right now.

50
00:02:59,370 --> 00:03:05,250
So I'm going to show you how it's in the specification and you're putting at Bable that core.

51
00:03:05,580 --> 00:03:14,400
So we're sorry before was like with Dash here, now it's now we need to install this core.

52
00:03:14,760 --> 00:03:19,770
OK, so the core, the biblical Hawza holds the functionality of this compiler.

53
00:03:19,920 --> 00:03:23,610
That's why we need to install this is a core package that we need to have.

54
00:03:23,850 --> 00:03:28,560
No, we will install multiple packages here in one line, in one go.

55
00:03:28,800 --> 00:03:30,330
So I'm not going to waste your time.

56
00:03:30,330 --> 00:03:32,940
So here I haven't shown you this before.

57
00:03:32,950 --> 00:03:38,860
That's why I want to show you that you can install multiple packages in one go next that we want to

58
00:03:38,860 --> 00:03:39,450
install.

59
00:03:39,690 --> 00:03:43,380
It's called Babille Preset Environment.

60
00:03:43,380 --> 00:03:52,080
So put at Nabal slash preset EMV sets for the environment.

61
00:03:52,440 --> 00:03:57,090
And I will just show you what that will be in know future lecture.

62
00:03:57,090 --> 00:04:01,950
So the price of the environment will take care of all of these modern features starting from year six

63
00:04:02,130 --> 00:04:04,890
and they need to be converted back to year five.

64
00:04:05,070 --> 00:04:06,510
That's why we need this package.

65
00:04:06,660 --> 00:04:10,680
We said environment and finally we need a better loader.

66
00:04:11,010 --> 00:04:14,700
So this will be used by the by the way, to load the Bebo files.

67
00:04:16,170 --> 00:04:17,790
So Babille loader.

68
00:04:19,020 --> 00:04:21,630
So you can see sometimes I call it Babbo, sometimes bable.

69
00:04:22,560 --> 00:04:23,350
Yeah.

70
00:04:23,670 --> 00:04:25,170
Doesn't doesn't really matter.

71
00:04:25,500 --> 00:04:25,860
Right.

72
00:04:26,050 --> 00:04:33,360
OK, so finally our output should look like this npm install Daschner save Dave so they will install

73
00:04:33,360 --> 00:04:34,950
these three packages here.

74
00:04:35,370 --> 00:04:36,900
This is the one, the first one.

75
00:04:37,050 --> 00:04:38,340
So you don't put a comma here.

76
00:04:38,520 --> 00:04:39,530
This is the second one.

77
00:04:39,540 --> 00:04:40,260
This is a third one.

78
00:04:40,260 --> 00:04:47,370
So make sure that they have space and I'm going to hit enter here and you need to wait for a while because

79
00:04:47,370 --> 00:04:52,050
they're going to take a couple of maybe maybe ten or twenty seconds.

80
00:04:52,050 --> 00:04:53,070
I'm going to pause the video.

81
00:04:53,550 --> 00:04:57,900
OK, so actually the install really quickly.

82
00:04:57,900 --> 00:04:59,820
So I'm going to go to the back package, the Jackson five.

83
00:05:00,230 --> 00:05:01,140
And here they are.

84
00:05:01,400 --> 00:05:04,920
So these are the three packages that we install in one line.

85
00:05:04,940 --> 00:05:06,570
So now you know how to do this, right?

86
00:05:06,890 --> 00:05:09,030
And that's pretty much it.

87
00:05:09,230 --> 00:05:14,030
Now, let's use this Bable loader to convert the files back to iOS five.

88
00:05:14,060 --> 00:05:14,990
So how are we going to do this?

89
00:05:15,530 --> 00:05:17,710
We can do it here after the plugins.

90
00:05:17,990 --> 00:05:20,270
So are we going to do it here in the configuration file?

91
00:05:20,300 --> 00:05:24,940
I'm just going to close this port and now we need to create here a module.

92
00:05:25,100 --> 00:05:29,930
So I'm going to see comma here module and I'm going to I'm going to pass in here.

93
00:05:29,930 --> 00:05:32,870
An object and object goes with this curly brackets.

94
00:05:32,870 --> 00:05:33,140
Right.

95
00:05:33,650 --> 00:05:39,710
So the module we will have object inside and here we will define a set of rules.

96
00:05:39,740 --> 00:05:40,100
Right.

97
00:05:40,280 --> 00:05:48,680
So I'm going to see rules and I'm going to pass in an array here right now inside these rules.

98
00:05:48,950 --> 00:05:52,080
So for each rule, we need to pass an object as well.

99
00:05:52,250 --> 00:05:54,830
So I need this curly brackets.

100
00:05:55,040 --> 00:05:55,770
So a little bit.

101
00:05:55,790 --> 00:05:57,930
This is a little bit strange with this.

102
00:05:57,930 --> 00:06:02,780
So all of these curly brackets, what it is, what it is, we need to still use this in order to configure

103
00:06:02,780 --> 00:06:03,720
it correctly.

104
00:06:03,980 --> 00:06:09,040
So another object here and now we need to test to find all the gas file in here.

105
00:06:09,050 --> 00:06:10,400
The keyword is test.

106
00:06:10,640 --> 00:06:15,470
And now I'm going to use something strange here because probably have never used before, but didn't

107
00:06:15,470 --> 00:06:15,980
like me.

108
00:06:16,340 --> 00:06:20,260
G.S. Dollar Sign and forward.

109
00:06:20,680 --> 00:06:26,540
Now, what this will do is actually this is a regular expression, this port.

110
00:06:26,660 --> 00:06:32,060
And what it will do, it will look through the entire entire package.

111
00:06:32,330 --> 00:06:37,060
Enter here all of the folders or directories that we have.

112
00:06:37,310 --> 00:06:42,710
It will look for it will test if we have JavaScript files that we will do.

113
00:06:43,070 --> 00:06:49,420
And the second thing that we want to do is to exclude all of the files there here in these note modules.

114
00:06:49,430 --> 00:06:49,640
Right.

115
00:06:49,820 --> 00:06:51,320
Because there are a lot of files here.

116
00:06:51,320 --> 00:06:54,680
As we store more and more packages, this will be big.

117
00:06:55,010 --> 00:07:04,350
And we don't want the we don't want the rules to be applied to those to that node module so we can exclude

118
00:07:05,330 --> 00:07:10,240
in here again the regular expression modules.

119
00:07:11,270 --> 00:07:14,080
Now, the modules are excluded.

120
00:07:14,100 --> 00:07:16,100
So we don't want here to do this.

121
00:07:16,580 --> 00:07:23,090
And why do we we haven't done the regular expressions, but probably will need them in future.

122
00:07:23,240 --> 00:07:25,250
So make sure that you Google and find a way.

123
00:07:25,250 --> 00:07:27,050
How can you write regular expressions?

124
00:07:27,050 --> 00:07:28,550
They're not there now.

125
00:07:29,720 --> 00:07:34,060
So the note module folder contains a lot of JS files that we don't need.

126
00:07:34,260 --> 00:07:35,690
Actually, that's why we exclude there.

127
00:07:35,960 --> 00:07:46,010
In the last part here is we need to use we need to use the loader and that is really much it.

128
00:07:47,540 --> 00:07:53,700
So I'm going to say here use and I'm going to say now we use the object again, one more object and

129
00:07:53,720 --> 00:07:59,750
I'm going to say a loader babble loader, OK?

130
00:08:01,550 --> 00:08:07,120
And once more so we have the module here and inside the module, we have a set of rules in.

131
00:08:07,130 --> 00:08:11,000
We are testing if they have the JS extension, this is the extension.

132
00:08:11,000 --> 00:08:15,390
For example, we do have the files here that indexed OJARS module module Dodgiest.

133
00:08:15,410 --> 00:08:17,690
They all have these that Geass extension.

134
00:08:17,810 --> 00:08:19,160
That's what we are looking for.

135
00:08:19,340 --> 00:08:19,670
Right.

136
00:08:19,790 --> 00:08:24,080
But we are excluding every genius extension that is located here.

137
00:08:24,230 --> 00:08:27,290
I mean, yeah, there's luckily no modules after that.

138
00:08:27,290 --> 00:08:33,650
We use the lower call Bable Loader and where we got this loader from back to Jason file because we already

139
00:08:33,650 --> 00:08:34,210
saw this.

140
00:08:34,700 --> 00:08:35,650
OK, nice.

141
00:08:35,990 --> 00:08:37,090
So let's go back here.

142
00:08:37,340 --> 00:08:41,510
What do we need to do now is to create something else, right?

143
00:08:41,660 --> 00:08:47,660
So let's create a new file called Bable or C, and I will create it here.

144
00:08:47,660 --> 00:08:57,230
And you file start with a Dot Syntex Beeble C and immediately will recognize that is a bable file.

145
00:08:57,260 --> 00:09:01,490
No, inside we will create again an object right here.

146
00:09:03,290 --> 00:09:05,450
I'm just gonna close this because I don't want to.

147
00:09:05,780 --> 00:09:10,490
So here we are going to set an object with presets values right here.

148
00:09:10,490 --> 00:09:19,970
I'm just going to say presets like this in here, we need these brackets.

149
00:09:19,970 --> 00:09:26,330
So here we are collection the presets will be a collection of code transform plugins.

150
00:09:26,750 --> 00:09:29,870
Now, these is like that inside here.

151
00:09:29,870 --> 00:09:32,810
We need another racket's like this.

152
00:09:32,810 --> 00:09:39,500
Make sure that you you follow me with the brackets, because if we don't put the brackets or anything

153
00:09:39,740 --> 00:09:45,710
incorrectly, if we put something incorrect here, another set of brackets, it will give us an error

154
00:09:45,710 --> 00:09:48,010
when we are doing to the compiling process.

155
00:09:48,020 --> 00:09:52,610
OK, now here I'm going to say I'm going to be fine here.

156
00:09:52,610 --> 00:09:56,450
The environment now, this is the packages that we installed before.

157
00:09:56,450 --> 00:09:56,810
Right.

158
00:09:56,930 --> 00:09:59,450
And I'm going to say at label.

159
00:10:00,130 --> 00:10:11,680
E and V, right, come here, these brackets in inside, we need the targets, so let's do this together

160
00:10:12,460 --> 00:10:15,160
and inside the targets, I will have browser's.

161
00:10:18,060 --> 00:10:26,050
OK, browser's make sure that you do targets, make sure that you press its targets in browsers, OK,

162
00:10:26,070 --> 00:10:30,580
for the browsers we can define what what browser.

163
00:10:30,580 --> 00:10:32,710
So here we are defining an area of a browser.

164
00:10:32,790 --> 00:10:33,090
Right.

165
00:10:34,500 --> 00:10:45,840
So what I want here, I can see the last five versions and also we can define even the even the Internet

166
00:10:45,840 --> 00:10:46,290
Explorer.

167
00:10:46,560 --> 00:10:50,640
So here we can define that Internet Explorer to be greater than the version.

168
00:10:50,880 --> 00:10:53,310
I'm going to explain this just shortly.

169
00:10:53,700 --> 00:10:58,920
The Internet Explorer to be greater or equal to the version eight.

170
00:10:59,640 --> 00:11:01,290
I think this is enough.

171
00:11:01,680 --> 00:11:05,400
Now, here we specify the browsers that we want to target.

172
00:11:05,430 --> 00:11:06,650
That's why I just put it here.

173
00:11:06,660 --> 00:11:10,970
The targets in the browser is going to be, say, C last five version.

174
00:11:11,160 --> 00:11:18,570
So this is needed because Bable now will know, which is six features need to convert for which browsers,

175
00:11:18,570 --> 00:11:19,950
how many versions here we can put.

176
00:11:20,130 --> 00:11:23,110
Let's do versions less five versions and stuff like that.

177
00:11:23,280 --> 00:11:25,080
This is all in the documentation, by the way.

178
00:11:25,080 --> 00:11:27,240
You can read more and more if you want it.

179
00:11:27,240 --> 00:11:37,680
Pretty much we are done here right now, all of these future versions now of the JavaScript.

180
00:11:37,920 --> 00:11:43,010
So for me, a six and to the E next day now will be converted back two years five.

181
00:11:43,200 --> 00:11:44,910
So this is what we're trying to say.

182
00:11:44,940 --> 00:11:50,490
OK, target the browsers, because now I want everything to be compatible, to be working and to be

183
00:11:50,490 --> 00:11:53,480
converted back to year five and to be working correctly.

184
00:11:53,640 --> 00:12:00,540
Now, sometimes this is not possible because not everything can be converted back to years five y because

185
00:12:00,690 --> 00:12:01,920
it's five, for example.

186
00:12:01,920 --> 00:12:03,780
They didn't have promises.

187
00:12:03,780 --> 00:12:05,370
They didn't have template literals.

188
00:12:05,370 --> 00:12:05,670
Right.

189
00:12:05,820 --> 00:12:07,190
They didn't have const.

190
00:12:07,200 --> 00:12:08,850
They had the variables before.

191
00:12:09,090 --> 00:12:15,180
So this is not something that we can do all the time with with this.

192
00:12:15,180 --> 00:12:16,320
So we need something else.

193
00:12:16,710 --> 00:12:25,020
So we need to use a polypill in that we need to create or to install another package called Bable Polyfoam.

194
00:12:25,410 --> 00:12:33,900
Now with this, for example, we can make the promise promises that we have in year six to be written

195
00:12:33,900 --> 00:12:35,540
back to year five in.

196
00:12:35,580 --> 00:12:37,650
After that, the code will be compatible.

197
00:12:37,800 --> 00:12:39,840
So that's pretty much it for this one.

198
00:12:39,840 --> 00:12:40,350
Save it.

199
00:12:40,500 --> 00:12:42,120
Close it now.

200
00:12:42,900 --> 00:12:51,870
How we how we can install it back to the terminal and say npm install, dash, dash, save.

201
00:12:51,870 --> 00:12:54,990
Now we're going to see if this is a development right.

202
00:12:55,200 --> 00:12:59,160
Bable Polli like that.

203
00:12:59,160 --> 00:13:06,960
Pawley filled with double L idiot in here I have open up the people Poplarville and before was a little

204
00:13:06,960 --> 00:13:09,150
bit different so you can copy even from here.

205
00:13:09,150 --> 00:13:14,670
And because this is a powerful which will run before the source code, we need to be as a dependency,

206
00:13:14,910 --> 00:13:16,500
not as a death dependency.

207
00:13:16,500 --> 00:13:19,140
That's why we put this flag here, right.

208
00:13:19,800 --> 00:13:24,300
Only say, OK, let's run it and let's see what will happen.

209
00:13:25,950 --> 00:13:29,430
Should be relatively quickly.

210
00:13:29,670 --> 00:13:31,470
OK, let's look at adjacent file.

211
00:13:31,470 --> 00:13:31,890
Here it is.

212
00:13:32,100 --> 00:13:38,550
Now, I do have the dev dependency up here and now I do have the dependencies here and that is Bable

213
00:13:38,550 --> 00:13:39,150
Polyfoam.

214
00:13:39,450 --> 00:13:44,220
So because this is a powerful which will run before your source code.

215
00:13:44,220 --> 00:13:45,270
So that's why we need to put it.

216
00:13:45,270 --> 00:13:46,950
There's a dependency now.

217
00:13:46,950 --> 00:13:50,130
This will be saved in the back adjacent file in.

218
00:13:50,340 --> 00:13:52,380
Now, we need to change a couple of things here.

219
00:13:52,530 --> 00:13:55,650
You need to go back to this WePay config here.

220
00:13:55,650 --> 00:13:58,380
We need to change this entry point now.

221
00:13:58,830 --> 00:13:59,490
The entry point.

222
00:13:59,490 --> 00:14:00,480
We need to change it.

223
00:14:00,900 --> 00:14:04,980
We need to add that bable PAULITO here and how are we going to do it?

224
00:14:04,980 --> 00:14:06,270
I'm just going to cut it from here.

225
00:14:06,480 --> 00:14:09,060
Control Si or control X, sorry.

226
00:14:09,480 --> 00:14:18,600
And I'm going to create an error here and I'm going to say, OK, Bable slash Qualys feel then I'm going

227
00:14:18,600 --> 00:14:20,760
to get a comma here sorry.

228
00:14:21,240 --> 00:14:22,910
And I'm going to pay the rest of it.

229
00:14:22,920 --> 00:14:23,280
Right.

230
00:14:23,610 --> 00:14:25,980
So now we have two entry points.

231
00:14:26,250 --> 00:14:28,680
The first one is for the Babel Polyphemus.

232
00:14:29,250 --> 00:14:34,310
In the second one is our actually our index dodgiest file.

233
00:14:34,320 --> 00:14:40,590
Now the weapon will bundle the polypill in our code and it will bundle up together.

234
00:14:40,770 --> 00:14:41,160
Right.

235
00:14:42,270 --> 00:14:45,210
So we have two entry points in.

236
00:14:45,510 --> 00:14:48,610
The first entry point is the poly field we installed here.

237
00:14:48,630 --> 00:14:49,380
Save this one.

238
00:14:49,380 --> 00:14:50,910
That's this one here.

239
00:14:51,120 --> 00:14:56,430
So you can even copy it here, because sometimes you can make a mistake like a typo and it will not

240
00:14:56,430 --> 00:14:56,700
work.

241
00:14:56,700 --> 00:14:58,260
Make sure that you have a comma here.

242
00:14:58,680 --> 00:15:00,210
Now, that's pretty much it.

243
00:15:00,210 --> 00:15:03,630
We've done the modules, so let's let's see what we have done.

244
00:15:03,630 --> 00:15:08,280
So in a while back, we have finished.

245
00:15:08,280 --> 00:15:14,640
What we have done is we installed all the packages here that we do have first these three packages in

246
00:15:14,640 --> 00:15:15,210
one go.

247
00:15:15,660 --> 00:15:17,130
After that, we change it.

248
00:15:17,280 --> 00:15:17,520
We.

249
00:15:17,640 --> 00:15:26,940
Added the module in the in the that, so that is the second step, the third step, we just create these

250
00:15:27,240 --> 00:15:32,180
Beeble or C file where we define the presets inside an object.

251
00:15:32,190 --> 00:15:32,540
Right.

252
00:15:33,120 --> 00:15:38,280
And we just say, OK, we tell the people what to look and what to convert.

253
00:15:38,490 --> 00:15:41,180
The first thing that is we install the polypill.

254
00:15:42,720 --> 00:15:45,400
I'm just going to show you this one as a dependencies.

255
00:15:45,960 --> 00:15:50,690
And so this will be the feature that we cannot convert back to years five.

256
00:15:51,000 --> 00:15:54,140
And one more thing that we need to do is just to test it out.

257
00:15:54,300 --> 00:15:59,640
So I know this was super, super long for you guys, but I hope you understand what we have done.

258
00:15:59,650 --> 00:16:02,610
This is the whole configuration thing that we need to do.

259
00:16:02,610 --> 00:16:04,990
From now on, we will just focus on our code.

260
00:16:05,250 --> 00:16:06,520
Now, how are we going to test this out?

261
00:16:06,540 --> 00:16:10,860
OK, just type it ampm run def.

262
00:16:10,980 --> 00:16:13,940
So I'm just going to run this script here, right.

263
00:16:15,690 --> 00:16:21,660
Because it's a development mode and that will create in the we already have this one but it will change

264
00:16:21,660 --> 00:16:22,400
it a little bit.

265
00:16:22,410 --> 00:16:25,350
OK, run it in.

266
00:16:25,350 --> 00:16:27,090
I should see all the green things.

267
00:16:27,330 --> 00:16:32,910
If you see some something else then probably there is a mistake, some that you have done somewhere.

268
00:16:33,210 --> 00:16:36,120
Or just compare my files to your files.

269
00:16:36,120 --> 00:16:37,860
Just compare, compare them.

270
00:16:37,860 --> 00:16:38,340
Here it is.

271
00:16:38,860 --> 00:16:40,350
OK, now let's test it out.

272
00:16:40,360 --> 00:16:45,640
So in the J is bundle that is what I can see here.

273
00:16:45,660 --> 00:16:50,430
The we have here it is not module's bable polyphenol.

274
00:16:50,550 --> 00:16:52,650
So this is already being included.

275
00:16:52,810 --> 00:16:58,470
OK, now if you go back here, I'm just going to show you why we need this, because maybe you didn't

276
00:16:58,470 --> 00:17:00,510
understand so far, but now you will.

277
00:17:01,950 --> 00:17:04,590
Here we use this template literals.

278
00:17:04,590 --> 00:17:10,170
Before they were not in year five, they were not being template literals.

279
00:17:10,170 --> 00:17:12,960
They were like this quotes.

280
00:17:12,960 --> 00:17:13,290
Right.

281
00:17:13,660 --> 00:17:17,550
And also so that was that.

282
00:17:17,550 --> 00:17:24,510
And let me just show you how this is converted into, OK, you have the bundle here.

283
00:17:24,690 --> 00:17:29,570
Now, I can search this line here, copy it, search it.

284
00:17:29,760 --> 00:17:30,450
And here it is.

285
00:17:30,870 --> 00:17:35,700
Now, you see here that this is this was imported from the module judges.

286
00:17:35,850 --> 00:17:36,480
But look at it.

287
00:17:36,630 --> 00:17:37,500
Look at here.

288
00:17:37,860 --> 00:17:39,170
Oh, where was it?

289
00:17:40,380 --> 00:17:43,770
So use these quotes.

290
00:17:43,770 --> 00:17:44,070
Right.

291
00:17:44,160 --> 00:17:46,140
It doesn't use the template literals.

292
00:17:46,350 --> 00:17:48,290
That's why we installed it this powerful.

293
00:17:48,310 --> 00:17:49,470
That's why it's going to work.

294
00:17:49,650 --> 00:17:54,570
And we are going to have no problems running the old calls.

295
00:17:54,570 --> 00:17:58,170
For example, if you create constant here, comes here.

296
00:17:58,170 --> 00:17:58,560
I don't know.

297
00:17:59,250 --> 00:18:04,620
Let's see h and I'm just going to the thirty three and let's load it here.

298
00:18:05,520 --> 00:18:18,510
And so this was important from the module just in the H const is coming from one end coming from my

299
00:18:18,510 --> 00:18:22,980
index file here and I'm just going to print it out the H.

300
00:18:23,340 --> 00:18:29,820
OK, now I'm going to save it and I'm going to run the, the spin room def again.

301
00:18:30,390 --> 00:18:30,840
Right.

302
00:18:31,930 --> 00:18:34,320
And I'm just going to wait to see here.

303
00:18:35,850 --> 00:18:37,530
Is it done yet.

304
00:18:37,540 --> 00:18:42,510
It's done now if I go back here and if I search.

305
00:18:46,820 --> 00:18:55,280
Here, I will say, OK, and age cost is coming from the index file, right, and that is something

306
00:18:55,280 --> 00:18:56,690
that we have done before.

307
00:18:56,930 --> 00:19:00,680
Now look at here where age equal 33.

308
00:19:01,130 --> 00:19:01,760
What happened?

309
00:19:04,040 --> 00:19:04,610
Where was it?

310
00:19:04,730 --> 00:19:07,580
Here it is, it's a variable, it's not constant.

311
00:19:07,610 --> 00:19:07,940
Why?

312
00:19:07,940 --> 00:19:14,120
Because in year five, we didn't have a const and let we did have variables.

313
00:19:14,360 --> 00:19:20,800
That's why the polypill is working and it will convert that back to to a readable yosfiah.

314
00:19:20,810 --> 00:19:22,980
And that's why this is H cool.

315
00:19:23,390 --> 00:19:27,600
Now, I hope you got the idea what we are trying to achieve here.

316
00:19:27,740 --> 00:19:36,710
We have the entire work process done and from the next lecture we will focus our focus on creating working

317
00:19:36,710 --> 00:19:37,610
on our project.

318
00:19:37,830 --> 00:19:41,840
This was the essential thing because without this, we couldn't do it.

319
00:19:42,350 --> 00:19:43,840
We could we could start coding.

320
00:19:43,880 --> 00:19:46,520
OK, so I will see you in the next one.