Original subtitles

1 1

Now that we activated bundling 2

2

it's time to configure Babel to transpile 3

3

or super modern code back to ES5 code. 4

4

And this is still important right now even many years 5

5

after the new ES6 standard has been introduced. 6

6

And the reason for that is simply 7

7

that there are still many people out there 8

8

who are stuck on like a windows XP 9

9

or windows seven computer 10

10

and two cannot upgrade their old internet explorers 11

11

but we want our applications to work for everyone. 12

12

And so we need to keep everyone in mind. 13

13

Now, the good news is 14

14

that parcel actually automatically uses Babel 15

15

to transpile or code. 16

16

And we can configure Babel a lot if we want to 17

17

for example defining exactly 18

18

what browsers should be supported 19

19

but as always, that's a ton of work. 20

20

And so we don't want that. 21

21

And instead parcel makes 22

22

some very good default decisions for us. 23

23

And so we will simply mainly just go with these defaults. 24

24

Now just so you get a very broad 25

25

and very general overview of how Babel works. 26

26

Let's just take a look at their website. 27

27

So that's Babeljs.io 28

28

and then here in the documentation 29

29

let's take a look here at plugins. 30

30

Okay. So basically Babel works 31

31

with plugins and presets 32

32

that can both be configured. 33

33

Now a plugin is basically a specific 34

34

JavaScript feature that we want to transpile. 35

35

So to convert. 36

36

So for example let's say we only wanted 37

37

to convert arrow functions back to ES5 38

38

but leave everything else in ES6 39

39

for example, const and var declarations. 40

40

Now usually that doesn't make a lot of sense 41

41

because basically we will want to transpile 42

42

everything at the same time. 43

43

And so usually instead of using single plugins 44

44

for each of these features, 45

45

Babel actually uses presets. 46

46

And so a preset is basically a bunch 47

47

of plugins bundled together. 48

48

And its by default parcel is going to use this preset 49

49

and preset here. 50

50

And this preset will automatically select 51

51

which JavaScript features should be compiled 52

52

based on browser support. 53

53

And again that will all happen automatically 54

54

and out of the box 55

55

Babel will convert all features 56

56

So only browsers that are barely used anymore 57

57

with the market share of less than 0.25% 58

58

are not going to be supported 59

59

by the transpiling with this preset here. 60

60

So, that's a very brief overview 61

61

and we will come back here in a second 62

62

but for now let's start on NPM run start script again 63

63

just so we can take a look again at our final output. 64

64

So the one we have right now 65

65

or we had before was decompressed one 66

66

which was not really helpful. 67

67

And so now the script is ads, this one so F30. 68

68

So this one 69

69

and we can see right away that ES6 is no longer there. 70

70

So here we have var 71

71

instead of const that we had before. 72

72

Let's see if we have something else. 73

73

So here we used to have 74

74

a template literal i believe 75

75

and this was now converted to again 76

76

regular ES5 code by using this concat method. 77

77

So everything that we used from ES6 is now gone 78

78

but now let me show you something important. 79

79

So let's write some code here 80

80

which is basically not part of this preset here 81

81

because this preset ENF 82

82

does actually only include final features. 83

83

So features that are already part of the language 84

84

after passing the four stages of the AGMA process. 85

85

However, previously we used class fields 86

86

which at the time of recording are only at stage three. 87

87

And so let me show you how we could 88

88

transpile a class fields as well. 89

89

So let's just write a simple example here. 90

90

And so here Iam going to use a field called greeting 91

91

which I'm going to set to Hey, 92

92

and then just a normal constructor 93

93

which takes a name, this.name equals the name. 94

94

And then as the constructor is run, 95

95

it will simply log to the console 96

96

this.greeting and then the name. 97

97

So like, Hey Jonas. 98

98

So const Jonas is a new person Jonas. 99

99

But now let's see what happens here 100

100

and we should get some kind of error. 101

101

So let's see. 102

102

Oh, and apparently it does work now 103

103

when i last tested it, it didn't work 104

104

so let's make this private 105

105

maybe then we get the error i was expecting 106

106

but actually no, everything is working great. 107

107

Let me just search our code here for person. 108

108

And so here you can see 109

109

that the person class has nicely been converted to ES5. 110

110

So the class keyword is nowhere to be found anymore. 111

111

And then our entire code 112

112

that we had here was basically converted to this, all right? 113

113

And so therefore there's actually no more need 114

114

for what I was going to show you 115

115

which we had to do before 116

116

which was to include 117

117

this a plugin here for the class properties 118

118

because this is still an experimental feature. 119

119

And so yeah, we had to manually include this plugin here 120

120

in order to make this code work 121

121

but now that's no longer necessary. 122

122

And so that makes this even more amazing 123

123

but let's try another experimental one 124

124

for example, this knowledge coalescing operator 125

125

which is still also a bit more on the experimental side. 126

126

So let's say Jonah's or null, let's say. 127

127

And so that actually works as well. 128

128

Okay great. 129

129

Now there's still two more things 130

130

that I need to show you here still. 131

131

And so let's write some more code here. 132

132

So what I will do now is to use the ES6 find method 133

133

to find products in a cart 134

134

that are edit more than twice. 135

135

So that's I believe just cart. 136

136

So cart.find 137

137

because remember this is an ES6 method 138

138

and then return.quantity where it's greater or equal to. 139

139

And so that is only the pizza here. 140

140

So you see, well 141

141

maybe this isn't a cart, let's see what's happening. 142

142

Oh but never mind. 143

143

This is not filter. 144

144

It is just find, so it will simply find 145

145

the first element, right? 146

146

And so this is the first element 147

147

where the quantity is greater to. 148

148

But anyway, what I want to show you here 149

149

is that well let me show it to you actually first. 150

150

So to find this code here in this other script 151

151

I will copy this part and then put it here. 152

152

And so you'll see that here is basically that same code. 153

153

So the arrow function that we had is gone 154

154

and it was replaced by this regular function. 155

155

However, the ES6 method find is still here. 156

156

So it has not been converted to ES5. 157

157

Now the same is too for other things 158

158

for example, let's try promises. 159

159

So promise.resolve 160

160

So we're creating an immediately 161

161

resolved promise to make this really a quick example. 162

162

And let's just log X to the console 163

163

and so that works 164

164

but it works because our browser understands ES6 165

165

because if we take a look here now 166

166

then promise is also not converted to ES5. 167

167

So remember promise is an ES6 feature 168

168

but again, it was not converted back to ES5 169

169

and the reason for that is that 170

170

Babel can actually only transpile ES6 Syntax. 171

171

So data things like arrow functions, 172

172

classes, const, or the spread operator. 173

173

So these are basically things 174

174

that have an equivalent way of writing them in ES5. 175

175

So for example the arrow function, 176

176

it is simply a different syntax. 177

177

And so Babel can simply write function instead of data. 178

178

And the same goes with const. 179

179

So it's very easy to simply convert that to VAR 180

180

but the same is not true for real new features 181

181

that were added to the language 182

182

like find and promise. 183

183

So these new additions to the language 184

184

so these new features, they can simply not be transpiled. 185

185

It's simply not possible. 186

186

Only syntax is easy to convert, so easy to compile. 187

187

However, all hope is not lost. 188

188

So for these added features 189

189

again, such as promises or all the array methods 190

190

like finds and really a bunch of other stuff, 191

191

we can polyfill them. 192

192

And so that's why since the beginning 193

193

I've always been saying transpiling and polyfilling. 194

194

So these new features, we have to polyfill them. 195

195

Now Babel used to do polyfilling 196

196

out of the box some time ago 197

197

but recently they started to simply 198

198

recommending another library. 199

199

And so we now have to manually import data as well. 200

200

So import Core-js so that's the name of the library. 201

201

And then we usually only want to import a part 202

202

of that library and that's called Stable. 203

203

And so we can write this. 204

204

Okay. 205

205

Now usually we have to install 206

206

all of the packages first 207

207

but fortunately parcel is smart 208

208

enough to install this automatically. 209

209

Well at least that is how it should be. 210

210

So maybe that doesn't work after all 211

211

so let's manually install it, but that's weird. 212

212

So core-js. 213

213

So let's see. 214

214

And so here we go. 215

215

So let's re-save it. 216

216

And so here we go. 217

217

Okay. 218

218

So you should probably 219

219

also try to install core-js manually 220

220

and then you will able to use it like this. 221

221

So maybe you're starting to see 222

222

that D things really change all the time. 223

223

And so, hi, I'm even confused myself sometimes 224

224

on why certain things used to work 225

225

and now they work differently. 226

226

But the good thing is 227

227

that you don't really have to understand all this. 228

228

So this is really more like a recipe 229

229

that you just need to follow. 230

230

And then with time it will all become like a routine 231

231

and it will become simple. 232

232

But anyway, let's go back to our code 233

233

but you will notice that's the code we had before 234

234

is actually still there. 235

235

So it's still the same 236

236

and promise and find have not been replaced. 237

237

And that's because that's simply not the way 238

238

it's supposed to work. 239

239

So instead what polyfilling does 240

240

is to basically recreate defined function 241

241

and to make it available in this bundle 242

242

so that the codes can then use it. 243

243

`So let's search for array.prototype 244

244

which remember, is where all the array methods are put. 245

245

So array.prototype.find. 246

246

And so, well here it is. 247

247

So Babel then uses this weird create methods. 248

248

But what matters here is that 249

249

this will basically implement array prototype find 250

250

and the same for find index, 251

251

every some filter map and also for each 252

252

even though these less ones here are not ES6 253

253

but for some reason they are still polyfilled here. 254

254

Oh right? And the same for promise, probably. 255

255

Well not probably for sure. 256

256

Otherwise this is not going to work 257

257

and it's not easy to find it 258

258

but well, here's the definition of promise 259

259

which is going to be global promise 260

260

but I'm not gonna dig even deeper into this. 261

261

That's just not really necessary. 262

262

However, as you just saw before 263

263

the polyfilling is going to polyfill everything 264

264

even if we don't need it. 265

265

So we had to D find index method there as well. 266

266

Let's actually go back there. 267

267

So array.prototype.find 268

268

So it also created find index and every, and some 269

269

and so we are actually not even using these. 270

270

And so if we wanted 271

271

we could cherry pick basically 272

272

just the features that we actually want to polyfill. 273

273

Now that of course is a lot of work 274

274

but it will also greatly reduce the bundle size. 275

275

And so it might be worth it 276

276

if that's really a concern. 277

277

So we could instead of this. 278

278

So instead of basically importing everything there is 279

279

we can just say core-js stable and then only array 280

280

and then find like this. 281

281

So now if we go back here, 282

282

then, well then only this one should be here. 283

283

(indistinct) It looks different now. 284

284

And so probably only this one was not polyfilled 285

285

At the same you could do for a promise 286

286

like this okay. 287

287

So that's going to be a lot of work 288

288

which we usually don't do 289

289

but it is possible again if you are really worried 290

290

about your bundle size. 291

291

Finally, just to finish there is still one feature 292

292

that is not polyfilled by this one here. 293

293

And so we always need to install 294

294

just one more package 295

295

which is called NPM install regenerator-runtime. 296

296

So regenerator.That's correct. 297

297

So let's see, let's already include it here. 298

298

So we need import, so regenerator-runtime/runtime like this. 299

299

Alright? So this here is for polyfilling async functions. 300

300

So again, it probably looks a bit confusing 301

301

that we have to do all of this, but yeah, don't worry. 302

302

It's just a recipe that you have to follow. 303

303

Okay. And usually you would put 304

304

these imports here right at the top of your file 305

305

but in this case, we can just leave them here 306

306

because they will be hosted anyway, right? 307

307

Also keep in mind that all of this might change. 308

308

And so if you're watching this video 309

309

like in two years from now, 310

310

then things might be different 311

311

and things might not work the same. 312

312

And so once again make sure 313

313

that you then install 314

314

exactly the same versions as I have here 315

315

especially this core-js and regenerator-runtime. 316

316

And of course, also parcel. 317

317

So just as I told you in the last video. 318

318

Now okay. 319

319

And with this, we're actually done with this video 320

320

and also with learning about Modern JavaScript Development. 321

321

So basically with learning about Tooling, 322

322

such as parcel and babel and also about modules. 323

323

Now in the remainder of this section, 324

324

so the next two videos 325

325

we will just quickly also talk 326

326

about modern JavaScript coding. 327

327

So more on the actual programming side of things. 328

328

And so there we will learn or actually more review 329

329

how to write clean and modern JavaScript code.