Original subtitles

1 1

So the module bundler 2

2

that we're gonna use in this course is called Parcel. 3

3

And it's super fast and easy to use, 4

4

and, even more importantly, 5

5

it works out of the box without any configuration. 6

6

Now you might've heard of Webpack as well 7

7

which is probably the most popular bundler 8

8

and especially in react world. 9

9

However, it's way too complex to use in a course like this. 10

10

And so let's now learn how to use Parcel. 11

11

So Parcel is basically just another build tool 12

12

which is also on NPM. 13

13

And so we will use NPM to install it. 14

14

So NPM install Parcel 15

15

but this is now a different dependency. 16

16

And so here we have to write 17

17

dash, dash, safe, dev like this. 18

18

Okay? 19

19

Then hit enter, and simply watch it install. 20

20

So a devDependency is basically like a tool 21

21

that we need to build our application. 22

22

But it's not a dependency 23

23

that we actually include in our code. 24

24

All right. 25

25

So it's simply a tool. 26

26

And so that's why it's called a devDependency 27

27

because we can use it to develop our project. 28

28

And so therefore it appears here in a new field, 29

29

in our package.json file. 30

30

So again, these libraries, 31

31

that we actually include in our code, 32

32

are the regular dependencies 33

33

and Parcel is a devDependency now, right? 34

34

So let's clear the console here and actually use Parcel. 35

35

So we do it here in the terminal 36

36

because Parcel is basically 37

37

just another command line interface. 38

38

However, we cannot simply run Parcel like this. 39

39

So this is not going to work 40

40

because the command is not found. 41

41

And the reason for that 42

42

is simply that this doesn't work 43

43

with locally installed packages. 44

44

And Parcel was indeed installed locally. 45

45

So basically only on this project 46

46

and that's why it showed up in the package.json file 47

47

of this exact project. 48

48

So there are also global installations 49

49

but more about that by the end of this video. 50

50

Now, in order to still be able to use Parcel 51

51

here in the console, we have two options. 52

52

So we can use something called NPX 53

53

or we can use NPM scripts. 54

54

So let's start with NPX, 55

55

which is basically an application built into a NPM. 56

56

So the details don't matter. 57

57

But what does matter is that we can simply use NPX 58

58

to now run the same command as we did before, 59

59

but this time it is going to work. 60

60

And so this is the normal command, 61

61

and the option that we pass into Parcel 62

62

basically is this entry point. 63

63

So the entry point is index.html 64

64

because that is where we include our script.js. 65

65

So basically the file that we want to bundle up. 66

66

So in our script.js, we are currently including 67

67

this cloneDeep deep module from Lodash, 68

68

and also let's actually put back 69

69

this code from the beginning 70

70

so that we are also importing 71

71

our shoppingCart module from before. 72

72

And so basically in this example, the goal of using Parcel 73

73

is to bundle these three modules together. 74

74

So script.js together with shoppingCart.js 75

75

and together with this cloneDeep. 76

76

And so let's actually try this now. 77

77

So I'm hitting enter here 78

78

and now it's going to take some time 79

79

and do some magic behind the scenes, 80

80

but now it is actually done. 81

81

So a Parcel actually then also starts 82

82

a new development server on this URL. 83

83

So let's click that. 84

84

And so you'll see it opened a new tab right here. 85

85

So basically besides only bundling, 86

86

it also does exactly the same job as our live server. 87

87

So remember that we started this development server 88

88

using the live server package, right? 89

89

And so this one here does exactly the same. 90

90

The difference is that this one is on port 8080, 91

91

and this one is on port 1234. 92

92

And here we also have local hosts 93

93

but that is exactly the same as the writing 127001. 94

94

So this is just the raw IP address 95

95

and local host is the nicer name. 96

96

All right. 97

97

Now, if you did have any errors by doing this, 98

98

so maybe you couldn't even install Parcel, 99

99

or maybe you got some error 100

100

while you were trying to run this command 101

101

then let me help you troubleshoot that. 102

102

So to do that, I'm going to open a new terminal here 103

103

and we can do that by clicking this plus. 104

104

And so now we have three. 105

105

And this first one we actually don't need anymore. 106

106

So this one is still running our live server. 107

107

And so let's canceled that by hitting control, C, okay? 108

108

And again, that's because Parcel already does that same job. 109

109

And so right now we no longer need this 110

110

and so now it's not working anymore, so let's close it. 111

111

And the same for this terminal window. 112

112

But anyway, let's go back to the one we were using. 113

113

And so again, if you had any error installing it, 114

114

you can try installing it with sudo 115

115

which will give you basically more permissions. 116

116

So you write sudo, 117

117

and then exactly the same command as before. 118

118

So NPM install Parcel. 119

119

This will then ask you for your password 120

120

and then hopefully that's going to work. 121

121

Now, if that doesn't fix it, 122

122

then you have to install exactly the same version 123

123

as I am using here. 124

124

So we can read that in our package.json file. 125

125

And so here you see that I'm using version 1.12.4. 126

126

And so you can NPM install exactly this version 127

127

by writing at and then 1.12.4. 128

128

So maybe you have version two already installed 129

129

because it's going to be coming out very soon 130

130

and then that might break something. 131

131

And so therefore it's best to use this version, 132

132

1.12.4, at least in this project. 133

133

In the next project, we will probably use version two. 134

134

And if that still doesn't fix it, 135

135

then before doing this command, 136

136

you can try to uninstall it first. 137

137

So NPM uninstall Parcel like this. 138

138

And then after that, 139

139

you can try again to install this version. 140

140

And so then you should be good to go. 141

141

So you should have no more errors then. 142

142

Okay. 143

143

Now speaking of errors, 144

144

we do actually have one error here coming from our code. 145

145

But the problem for all of that 146

146

is that we still have this type module here. 147

147

However, what Parcel does 148

148

is that it basically, simply, creates a script. 149

149

And so now we are actually no longer using a module 150

150

but we are back to using a regular script. 151

151

And that is important 152

152

because modules do not work in older browsers. 153

153

So let's comment this one out just so we can also keep it. 154

154

Then I'm deleting this part and then let's give it a save 155

155

so that Parcel can rebuild this application. 156

156

And great, the error is gone. 157

157

Okay. 158

158

But now let's actually take a look at what Parcel did here. 159

159

So what it did was to create this dist folder, 160

160

which stands for distribution, 161

161

because it is essentially gonna be this folder 162

162

that we will send for production. 163

163

So basically it's the code in this folder 164

164

that we will send to our final users. 165

165

So you'll see it created a new index.html here 166

166

and also a bunch of JavaScript files. 167

167

So let's take a look at this index here. 168

168

And so you see that indeed it is a new one 169

169

because the included script here 170

170

is now no longer the one that we built ourselves 171

171

but it is script, dot and then all of this here. 172

172

And so this new script here is basically the bundle itself. 173

173

So it's this file, and so let's analyze it here as well. 174

174

Okay. 175

175

And so here you already see that it does include 176

176

some of the stuff that we have in our other modules. 177

177

So importing module, for example, we had in script.js. 178

178

Let's see what else we have here. 179

179

So here you see a bunch of stuff 180

180

that is created by Parcel, of course. 181

181

So this is basically the cloneDeep function, 182

182

probably, at some point here. 183

183

So you see a lot of code created by Parcel. 184

184

But, yeah. 185

185

So in the real world, you will not take a look at this code, 186

186

but I just wanted to show you 187

187

that, of course, all of our code is now in here. 188

188

So let's just search for cloneDeep, for example. 189

189

So the one that we used. 190

190

And so it's gotta be somewhere down here as a function. 191

191

And so indeed all the code that we had before, 192

192

spread across multiple modules, is now all in this script. 193

193

And so that's exactly the goal that we had. 194

194

And unused code has probably also not yet been removed 195

195

but we will leave that for later. 196

196

So that's going to be the build step 197

197

but what we're doing right now is the development step. 198

198

And so in order for us to be able 199

199

to check the code during development, 200

200

it will not compress everything. 201

201

All right? 202

202

So we can close all of this and go back to our script here 203

203

because I want to show you something. 204

204

So of course, whenever we now save this file, 205

205

then it will reload this file here, 206

206

just as we had before with live server, right? 207

207

So as I saved you see that everything here reloaded, right? 208

208

And we can see that here as well. 209

209

So take a look at what happens when I save this here. 210

210

Then you'll see this happened again. 211

211

However, in Parcel, we can activate something even better, 212

212

which is called hot module replacement. 213

213

So we can write if module.hot, like this, 214

214

then module.hot.accept. 215

215

Now this code here is code that only Parcel understands. 216

216

And so of course it will not make it into our final bundle 217

217

because the browser is not going to understand any of it. 218

218

But anyway, what hot module reloading means 219

219

is that whenever we change one of the modules, 220

220

it will then, of course, trigger a rebuild, like this, 221

221

but that new modified bundle will then automatically, 222

222

like magic, get injected into the browser 223

223

without triggering a whole page reload. 224

224

All right. 225

225

So again, whenever we change something here, 226

226

this will then not reload this part of the page. 227

227

And so that's going to be amazing 228

228

for maintaining state on our page 229

229

whenever we are testing out something. 230

230

So this used to be something quite annoying in the past. 231

231

For example, in our Bankist the application, 232

232

where whenever we reloaded the page, 233

233

we needed to log in again into the application. 234

234

Remember that? 235

235

But with Parcel and hot module replacement, 236

236

that's not going to happen, 237

237

because the page will not reload. 238

238

So if I save this now, 239

239

then probably it's going to look the same. 240

240

But again, if we had some state here on the page, 241

241

then that would be maintained. 242

242

Okay, next up, let's change something here. 243

243

So as I said, when we first included this cloneDeep here, 244

244

from lodash, this is quite cumbersome doing it like this. 245

245

And so that's why in all module bundlers, 246

246

there's no need for specifying 247

247

the entire path to any module. 248

248

So instead we can simply do this. 249

249

So keeping this here just for reference, 250

250

and then all we need to say 251

251

is that we want to include the lodash library. 252

252

And so Parcel will then automatically 253

253

find the path to this module, 254

254

and will simply import it like this 255

255

without us having to manually tie up 256

256

the entire path to there. 257

257

And so that's a lot more useful than what we had before. 258

258

And in fact, this works with all kinds of assets. 259

259

So even with HTML or CSS or SAS files, 260

260

or even images, and of course also all kinds of modules. 261

261

So not only ESX modules, 262

262

but this is also going to work with CommonJS modules. 263

263

So let me actually show that to you. 264

264

So instead of importing a DES version of lodash, 265

265

we can simply import lodash like this. 266

266

So just a regular version of lodash 267

267

and Parcel is even smart enough 268

268

to then automatically install this package here. 269

269

Okay. 270

270

So now if we go to our package.json right here, 271

271

well, it's probably not here. 272

272

So it looks like maybe it didn't install it. 273

273

So probably it's simply still using this one. 274

274

Okay. 275

275

But anyway, what I said is still true. 276

276

So Parcel can indeed work 277

277

with all the CommonJS modules as well. 278

278

And so this way we can then simply use 279

279

all the modules that are available on NPM 280

280

and which still use this older module format. 281

281

So let's leave it like this, save it again. 282

282

And maybe you have been noticing that this cart right here 283

283

keeps growing and growing and growing. 284

284

So if we take a look at this, 285

285

you see that we are adding these three products 286

286

over and over again. 287

287

And so the reason for that is hot module replacement. 288

288

So the state is maintained whenever we reload the page here. 289

289

And so that's exactly what we can now observe here. 290

290

Okay. 291

291

So if we save it again, then we will have 15 292

292

because we are simply adding new objects into this object 293

293

that keeps persisting over page reloads, basically. 294

294

And so this works with all state, 295

295

and again, it's going to be really, really helpful. 296

296

Okay. 297

297

So this is how Parcel works and let me know, finish it here 298

298

because remember the way we executed Parcel first 299

299

was by saying a NPX Parcel and then index.html. 300

300

However, I mentioned that there is a second way, 301

301

which is to use NPM script. 302

302

And so that's the way we actually use it in practice. 303

303

So NPM scripts are basically another way 304

304

of running a locally installed packages in the command line. 305

305

They also allow us to basically automate repetitive tasks. 306

306

And so therefore we then don't have to write NPX Parcel 307

307

and all of that, every time that we want to use it. 308

308

So we can simply create a script here, 309

309

and let me delete this one here, 310

310

let me just delete all of it and create a new one. 311

311

So we need to double quote and then the name of the script 312

312

and the default is start here, 313

313

and then here comes the script itself. 314

314

And so the script is going to 315

315

be simply Parcel index.html. 316

316

So again, we can't write this command 317

317

directly in the command line, 318

318

but we can write it in the NPM script. 319

319

And so let's now go back to our console 320

320

and try it out and actually run this command. 321

321

NPM run and then start. 322

322

And so start is the name of the NPM script 323

323

that we defined here. 324

324

So let's try that. 325

325

And here we go. 326

326

So it's doing the same thing as before 327

327

but now we have the simple command 328

328

that we can execute whenever we want to start Parcel 329

329

and whenever we want to start developing, basically. 330

330

All right. 331

331

And so again, that is mainly how we do it in development. 332

332

Okay. 333

333

And speaking of development, 334

334

whenever we are done developing our project, 335

335

it is time to build the final bundle. 336

336

So the bundle that is compressed 337

337

and has dead code elimination and all of that. 338

338

And so for that, we need another Parcel command. 339

339

And so let's add that as another script here. 340

340

So we need to come up 341

341

and then this one will be called build. 342

342

And so Parcel, build, and then again, index.html. 343

343

So let's stop this one here actually, 344

344

and now let's run NPM run build. 345

345

So this might take some more time this time 346

346

because it's doing a lot more work behind the scenes, 347

347

but let's just wait for it. 348

348

All right. 349

349

And so now we even get this nice output 350

350

with the sizes of everything. 351

351

And so let's now take a look at our dist folder, 352

352

and you see immediately 353

353

that this HTML looks different, right? 354

354

It is compressed now. 355

355

So the script that we can then ship to the browser 356

356

and ship to our users is this one. 357

357

So ending in FD3. 358

358

So this one, all right. 359

359

And again, you see that it looks quite different. 360

360

Everything is compressed into this unreadable mess, 361

361

but it is, of course, a lot more performance 362

362

than the script that we had before. 363

363

And so that's why Parcel does this for us. 364

364

And we will, again, come back 365

365

to all of this in the real world 366

366

once we actually move to our next more real project 367

367

in which we're going to use all of this. 368

368

Now, just to finish this lecture, 369

369

I also wanted to mention 370

370

that we can also install packages globally. 371

371

And so that would work like this. 372

372

So NPM install Parcel, and then G which stands for global. 373

373

And this is actually the way 374

374

that we installed the live server package before. 375

375

And so, because of that, 376

376

we were then simply able to use live server 377

377

in every directory on our computer. 378

378

So basically the big difference 379

379

between globally and locally installed packages 380

380

and especially these tools like Parcel or live server, 381

381

is that we can use the global tools 382

382

directly in the command line 383

383

without the intermediate step of an NPM script. 384

384

However, most of these tools actually advise developers 385

385

to always install the tools locally 386

386

so that they can always stay on the latest version. 387

387

And so usually I follow that approach as well. 388

388

And so I'm not going to install Parcel globally like this. 389

389

Okay. 390

390

And that's the fundamentals of bundling with Parcel 391

391

and of using build tools with NPM. 392

392

So I introduced a lot of different concepts here. 393

393

So to make sure to review this, 394

394

especially this part about the NPM scripts, 395

395

maybe that might be confusing 396

396

and also take a look at the output files 397

397

that Parcel gives us. 398

398

So just take some time to review 399

399

all that we did in this video. 400

400

And if after that, this is all still very confusing to you, 401

401

then don't worry. 402

402

I'm sure that it will make total sense 403

403

once we actually use this in our next big project.