Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,190 --> 00:00:03,470 Now that we activated bundling 2 2 00:00:03,470 --> 00:00:05,991 it's time to configure Babel to transpile 3 3 00:00:05,991 --> 00:00:10,472 or super modern code back to ES5 code. 4 4 00:00:10,472 --> 00:00:14,382 And this is still important right now even many years 5 5 00:00:14,382 --> 00:00:19,250 after the new ES6 standard has been introduced. 6 6 00:00:19,250 --> 00:00:21,011 And the reason for that is simply 7 7 00:00:21,011 --> 00:00:24,040 that there are still many people out there 8 8 00:00:24,040 --> 00:00:26,901 who are stuck on like a windows XP 9 9 00:00:26,901 --> 00:00:28,929 or windows seven computer 10 10 00:00:28,929 --> 00:00:32,824 and two cannot upgrade their old internet explorers 11 11 00:00:32,824 --> 00:00:36,810 but we want our applications to work for everyone. 12 12 00:00:36,810 --> 00:00:39,023 And so we need to keep everyone in mind. 13 13 00:00:40,930 --> 00:00:42,450 Now, the good news is 14 14 00:00:42,450 --> 00:00:45,980 that parcel actually automatically uses Babel 15 15 00:00:45,980 --> 00:00:48,350 to transpile or code. 16 16 00:00:48,350 --> 00:00:51,602 And we can configure Babel a lot if we want to 17 17 00:00:51,602 --> 00:00:53,849 for example defining exactly 18 18 00:00:53,849 --> 00:00:57,300 what browsers should be supported 19 19 00:00:57,300 --> 00:01:00,420 but as always, that's a ton of work. 20 20 00:01:00,420 --> 00:01:02,330 And so we don't want that. 21 21 00:01:02,330 --> 00:01:04,770 And instead parcel makes 22 22 00:01:04,770 --> 00:01:07,020 some very good default decisions for us. 23 23 00:01:07,020 --> 00:01:12,020 And so we will simply mainly just go with these defaults. 24 24 00:01:12,220 --> 00:01:14,216 Now just so you get a very broad 25 25 00:01:14,216 --> 00:01:18,690 and very general overview of how Babel works. 26 26 00:01:18,690 --> 00:01:21,570 Let's just take a look at their website. 27 27 00:01:21,570 --> 00:01:24,334 So that's Babeljs.io 28 28 00:01:24,334 --> 00:01:27,132 and then here in the documentation 29 29 00:01:27,132 --> 00:01:31,163 let's take a look here at plugins. 30 30 00:01:32,290 --> 00:01:35,540 Okay. So basically Babel works 31 31 00:01:35,540 --> 00:01:37,720 with plugins and presets 32 32 00:01:37,720 --> 00:01:40,420 that can both be configured. 33 33 00:01:40,420 --> 00:01:43,210 Now a plugin is basically a specific 34 34 00:01:43,210 --> 00:01:46,820 JavaScript feature that we want to transpile. 35 35 00:01:46,820 --> 00:01:48,410 So to convert. 36 36 00:01:48,410 --> 00:01:50,950 So for example let's say we only wanted 37 37 00:01:50,950 --> 00:01:54,000 to convert arrow functions back to ES5 38 38 00:01:54,000 --> 00:01:56,850 but leave everything else in ES6 39 39 00:01:56,850 --> 00:02:00,070 for example, const and var declarations. 40 40 00:02:00,070 --> 00:02:02,920 Now usually that doesn't make a lot of sense 41 41 00:02:02,920 --> 00:02:05,825 because basically we will want to transpile 42 42 00:02:05,825 --> 00:02:08,170 everything at the same time. 43 43 00:02:08,170 --> 00:02:11,270 And so usually instead of using single plugins 44 44 00:02:11,270 --> 00:02:13,630 for each of these features, 45 45 00:02:13,630 --> 00:02:15,836 Babel actually uses presets. 46 46 00:02:15,836 --> 00:02:19,136 And so a preset is basically a bunch 47 47 00:02:19,136 --> 00:02:22,360 of plugins bundled together. 48 48 00:02:22,360 --> 00:02:26,285 And its by default parcel is going to use this preset 49 49 00:02:26,285 --> 00:02:28,035 and preset here. 50 50 00:02:28,035 --> 00:02:31,520 And this preset will automatically select 51 51 00:02:31,520 --> 00:02:34,650 which JavaScript features should be compiled 52 52 00:02:34,650 --> 00:02:36,970 based on browser support. 53 53 00:02:36,970 --> 00:02:39,578 And again that will all happen automatically 54 54 00:02:39,578 --> 00:02:41,290 and out of the box 55 55 00:02:41,290 --> 00:02:43,393 Babel will convert all features 56 56 00:02:43,393 --> 00:02:46,924 So only browsers that are barely used anymore 57 57 00:02:46,924 --> 00:02:51,463 with the market share of less than 0.25% 58 58 00:02:51,463 --> 00:02:53,530 are not going to be supported 59 59 00:02:53,530 --> 00:02:56,863 by the transpiling with this preset here. 60 60 00:02:58,180 --> 00:03:00,690 So, that's a very brief overview 61 61 00:03:00,690 --> 00:03:04,340 and we will come back here in a second 62 62 00:03:04,340 --> 00:03:09,336 but for now let's start on NPM run start script again 63 63 00:03:09,336 --> 00:03:14,336 just so we can take a look again at our final output. 64 64 00:03:15,780 --> 00:03:17,340 So the one we have right now 65 65 00:03:19,051 --> 00:03:21,050 or we had before was decompressed one 66 66 00:03:21,050 --> 00:03:23,003 which was not really helpful. 67 67 00:03:23,900 --> 00:03:28,423 And so now the script is ads, this one so F30. 68 68 00:03:30,120 --> 00:03:31,230 So this one 69 69 00:03:32,140 --> 00:03:36,860 and we can see right away that ES6 is no longer there. 70 70 00:03:36,860 --> 00:03:38,140 So here we have var 71 71 00:03:39,112 --> 00:03:41,383 instead of const that we had before. 72 72 00:03:42,580 --> 00:03:44,453 Let's see if we have something else. 73 73 00:03:45,620 --> 00:03:47,080 So here we used to have 74 74 00:03:47,080 --> 00:03:49,510 a template literal i believe 75 75 00:03:50,820 --> 00:03:53,550 and this was now converted to again 76 76 00:03:53,550 --> 00:03:58,270 regular ES5 code by using this concat method. 77 77 00:03:58,270 --> 00:04:01,860 So everything that we used from ES6 is now gone 78 78 00:04:03,220 --> 00:04:06,300 but now let me show you something important. 79 79 00:04:06,300 --> 00:04:08,210 So let's write some code here 80 80 00:04:08,210 --> 00:04:12,130 which is basically not part of this preset here 81 81 00:04:12,130 --> 00:04:14,060 because this preset ENF 82 82 00:04:14,060 --> 00:04:17,260 does actually only include final features. 83 83 00:04:17,260 --> 00:04:20,380 So features that are already part of the language 84 84 00:04:20,380 --> 00:04:24,340 after passing the four stages of the AGMA process. 85 85 00:04:24,340 --> 00:04:27,700 However, previously we used class fields 86 86 00:04:27,700 --> 00:04:31,620 which at the time of recording are only at stage three. 87 87 00:04:31,620 --> 00:04:33,480 And so let me show you how we could 88 88 00:04:34,390 --> 00:04:36,720 transpile a class fields as well. 89 89 00:04:36,720 --> 00:04:39,483 So let's just write a simple example here. 90 90 00:04:40,870 --> 00:04:44,860 And so here Iam going to use a field called greeting 91 91 00:04:44,860 --> 00:04:46,853 which I'm going to set to Hey, 92 92 00:04:48,640 --> 00:04:50,850 and then just a normal constructor 93 93 00:04:50,850 --> 00:04:55,253 which takes a name, this.name equals the name. 94 94 00:04:56,840 --> 00:04:59,500 And then as the constructor is run, 95 95 00:04:59,500 --> 00:05:01,760 it will simply log to the console 96 96 00:05:01,760 --> 00:05:05,270 this.greeting and then the name. 97 97 00:05:05,270 --> 00:05:07,423 So like, Hey Jonas. 98 98 00:05:09,070 --> 00:05:14,053 So const Jonas is a new person Jonas. 99 99 00:05:16,340 --> 00:05:19,130 But now let's see what happens here 100 100 00:05:19,130 --> 00:05:21,373 and we should get some kind of error. 101 101 00:05:22,600 --> 00:05:23,593 So let's see. 102 102 00:05:24,560 --> 00:05:28,160 Oh, and apparently it does work now 103 103 00:05:28,160 --> 00:05:31,680 when i last tested it, it didn't work 104 104 00:05:31,680 --> 00:05:33,090 so let's make this private 105 105 00:05:33,090 --> 00:05:36,290 maybe then we get the error i was expecting 106 106 00:05:37,360 --> 00:05:40,940 but actually no, everything is working great. 107 107 00:05:40,940 --> 00:05:45,520 Let me just search our code here for person. 108 108 00:05:45,520 --> 00:05:46,810 And so here you can see 109 109 00:05:46,810 --> 00:05:51,810 that the person class has nicely been converted to ES5. 110 110 00:05:52,910 --> 00:05:56,630 So the class keyword is nowhere to be found anymore. 111 111 00:05:56,630 --> 00:05:57,843 And then our entire code 112 112 00:05:57,843 --> 00:06:02,843 that we had here was basically converted to this, all right? 113 113 00:06:03,190 --> 00:06:05,996 And so therefore there's actually no more need 114 114 00:06:05,996 --> 00:06:08,140 for what I was going to show you 115 115 00:06:09,000 --> 00:06:10,660 which we had to do before 116 116 00:06:10,660 --> 00:06:11,980 which was to include 117 117 00:06:11,980 --> 00:06:16,980 this a plugin here for the class properties 118 118 00:06:18,580 --> 00:06:22,690 because this is still an experimental feature. 119 119 00:06:22,690 --> 00:06:27,690 And so yeah, we had to manually include this plugin here 120 120 00:06:27,730 --> 00:06:29,870 in order to make this code work 121 121 00:06:29,870 --> 00:06:32,150 but now that's no longer necessary. 122 122 00:06:32,150 --> 00:06:35,630 And so that makes this even more amazing 123 123 00:06:35,630 --> 00:06:38,150 but let's try another experimental one 124 124 00:06:38,150 --> 00:06:41,470 for example, this knowledge coalescing operator 125 125 00:06:41,470 --> 00:06:46,340 which is still also a bit more on the experimental side. 126 126 00:06:46,340 --> 00:06:51,340 So let's say Jonah's or null, let's say. 127 127 00:06:54,600 --> 00:06:57,300 And so that actually works as well. 128 128 00:06:57,300 --> 00:06:59,340 Okay great. 129 129 00:06:59,340 --> 00:07:01,290 Now there's still two more things 130 130 00:07:01,290 --> 00:07:03,810 that I need to show you here still. 131 131 00:07:03,810 --> 00:07:05,983 And so let's write some more code here. 132 132 00:07:07,190 --> 00:07:10,310 So what I will do now is to use the ES6 find method 133 133 00:07:10,310 --> 00:07:13,690 to find products in a cart 134 134 00:07:13,690 --> 00:07:17,060 that are edit more than twice. 135 135 00:07:17,060 --> 00:07:19,803 So that's I believe just cart. 136 136 00:07:20,780 --> 00:07:24,180 So cart.find 137 137 00:07:24,180 --> 00:07:26,970 because remember this is an ES6 method 138 138 00:07:29,330 --> 00:07:34,330 and then return.quantity where it's greater or equal to. 139 139 00:07:37,520 --> 00:07:39,833 And so that is only the pizza here. 140 140 00:07:41,190 --> 00:07:44,040 So you see, well 141 141 00:07:44,890 --> 00:07:49,743 maybe this isn't a cart, let's see what's happening. 142 142 00:07:52,020 --> 00:07:53,313 Oh but never mind. 143 143 00:07:54,530 --> 00:07:55,910 This is not filter. 144 144 00:07:55,910 --> 00:07:58,880 It is just find, so it will simply find 145 145 00:07:58,880 --> 00:08:01,340 the first element, right? 146 146 00:08:01,340 --> 00:08:02,730 And so this is the first element 147 147 00:08:02,730 --> 00:08:06,380 where the quantity is greater to. 148 148 00:08:06,380 --> 00:08:08,950 But anyway, what I want to show you here 149 149 00:08:08,950 --> 00:08:12,513 is that well let me show it to you actually first. 150 150 00:08:13,560 --> 00:08:16,720 So to find this code here in this other script 151 151 00:08:16,720 --> 00:08:21,040 I will copy this part and then put it here. 152 152 00:08:21,040 --> 00:08:25,500 And so you'll see that here is basically that same code. 153 153 00:08:25,500 --> 00:08:28,070 So the arrow function that we had is gone 154 154 00:08:28,070 --> 00:08:31,750 and it was replaced by this regular function. 155 155 00:08:31,750 --> 00:08:36,420 However, the ES6 method find is still here. 156 156 00:08:36,420 --> 00:08:39,313 So it has not been converted to ES5. 157 157 00:08:40,200 --> 00:08:43,200 Now the same is too for other things 158 158 00:08:43,200 --> 00:08:45,623 for example, let's try promises. 159 159 00:08:46,550 --> 00:08:50,290 So promise.resolve 160 160 00:08:50,290 --> 00:08:51,720 So we're creating an immediately 161 161 00:08:51,720 --> 00:08:56,073 resolved promise to make this really a quick example. 162 162 00:08:59,080 --> 00:09:01,520 And let's just log X to the console 163 163 00:09:02,410 --> 00:09:03,910 and so that works 164 164 00:09:03,910 --> 00:09:08,110 but it works because our browser understands ES6 165 165 00:09:09,100 --> 00:09:11,360 because if we take a look here now 166 166 00:09:11,360 --> 00:09:15,420 then promise is also not converted to ES5. 167 167 00:09:15,420 --> 00:09:18,700 So remember promise is an ES6 feature 168 168 00:09:18,700 --> 00:09:22,990 but again, it was not converted back to ES5 169 169 00:09:22,990 --> 00:09:24,680 and the reason for that is that 170 170 00:09:24,680 --> 00:09:29,330 Babel can actually only transpile ES6 Syntax. 171 171 00:09:29,330 --> 00:09:31,950 So data things like arrow functions, 172 172 00:09:31,950 --> 00:09:36,540 classes, const, or the spread operator. 173 173 00:09:36,540 --> 00:09:38,450 So these are basically things 174 174 00:09:38,450 --> 00:09:42,880 that have an equivalent way of writing them in ES5. 175 175 00:09:42,880 --> 00:09:45,100 So for example the arrow function, 176 176 00:09:45,100 --> 00:09:47,470 it is simply a different syntax. 177 177 00:09:47,470 --> 00:09:51,153 And so Babel can simply write function instead of data. 178 178 00:09:52,110 --> 00:09:54,730 And the same goes with const. 179 179 00:09:54,730 --> 00:09:57,970 So it's very easy to simply convert that to VAR 180 180 00:09:57,970 --> 00:10:01,400 but the same is not true for real new features 181 181 00:10:01,400 --> 00:10:03,280 that were added to the language 182 182 00:10:03,280 --> 00:10:05,720 like find and promise. 183 183 00:10:05,720 --> 00:10:08,410 So these new additions to the language 184 184 00:10:08,410 --> 00:10:12,740 so these new features, they can simply not be transpiled. 185 185 00:10:12,740 --> 00:10:14,730 It's simply not possible. 186 186 00:10:14,730 --> 00:10:19,470 Only syntax is easy to convert, so easy to compile. 187 187 00:10:19,470 --> 00:10:23,120 However, all hope is not lost. 188 188 00:10:23,120 --> 00:10:25,500 So for these added features 189 189 00:10:25,500 --> 00:10:29,060 again, such as promises or all the array methods 190 190 00:10:29,060 --> 00:10:32,870 like finds and really a bunch of other stuff, 191 191 00:10:32,870 --> 00:10:34,790 we can polyfill them. 192 192 00:10:34,790 --> 00:10:37,090 And so that's why since the beginning 193 193 00:10:37,090 --> 00:10:41,450 I've always been saying transpiling and polyfilling. 194 194 00:10:41,450 --> 00:10:44,923 So these new features, we have to polyfill them. 195 195 00:10:46,470 --> 00:10:48,620 Now Babel used to do polyfilling 196 196 00:10:48,620 --> 00:10:50,740 out of the box some time ago 197 197 00:10:50,740 --> 00:10:53,290 but recently they started to simply 198 198 00:10:53,290 --> 00:10:55,450 recommending another library. 199 199 00:10:55,450 --> 00:10:58,723 And so we now have to manually import data as well. 200 200 00:10:59,580 --> 00:11:04,580 So import Core-js so that's the name of the library. 201 201 00:11:06,240 --> 00:11:10,070 And then we usually only want to import a part 202 202 00:11:10,070 --> 00:11:13,880 of that library and that's called Stable. 203 203 00:11:13,880 --> 00:11:16,160 And so we can write this. 204 204 00:11:16,160 --> 00:11:17,540 Okay. 205 205 00:11:17,540 --> 00:11:20,490 Now usually we have to install 206 206 00:11:20,490 --> 00:11:22,280 all of the packages first 207 207 00:11:22,280 --> 00:11:24,330 but fortunately parcel is smart 208 208 00:11:24,330 --> 00:11:27,400 enough to install this automatically. 209 209 00:11:27,400 --> 00:11:29,963 Well at least that is how it should be. 210 210 00:11:31,510 --> 00:11:33,780 So maybe that doesn't work after all 211 211 00:11:34,780 --> 00:11:37,913 so let's manually install it, but that's weird. 212 212 00:11:39,780 --> 00:11:41,153 So core-js. 213 213 00:11:43,500 --> 00:11:44,563 So let's see. 214 214 00:11:46,600 --> 00:11:48,100 And so here we go. 215 215 00:11:48,100 --> 00:11:51,090 So let's re-save it. 216 216 00:11:51,090 --> 00:11:52,083 And so here we go. 217 217 00:11:53,440 --> 00:11:54,810 Okay. 218 218 00:11:54,810 --> 00:11:56,308 So you should probably 219 219 00:11:56,308 --> 00:11:59,460 also try to install core-js manually 220 220 00:11:59,460 --> 00:12:02,790 and then you will able to use it like this. 221 221 00:12:02,790 --> 00:12:04,630 So maybe you're starting to see 222 222 00:12:04,630 --> 00:12:07,920 that D things really change all the time. 223 223 00:12:07,920 --> 00:12:10,376 And so, hi, I'm even confused myself sometimes 224 224 00:12:10,376 --> 00:12:13,590 on why certain things used to work 225 225 00:12:13,590 --> 00:12:15,800 and now they work differently. 226 226 00:12:15,800 --> 00:12:16,910 But the good thing is 227 227 00:12:16,910 --> 00:12:20,160 that you don't really have to understand all this. 228 228 00:12:20,160 --> 00:12:22,860 So this is really more like a recipe 229 229 00:12:22,860 --> 00:12:24,200 that you just need to follow. 230 230 00:12:24,200 --> 00:12:28,260 And then with time it will all become like a routine 231 231 00:12:28,260 --> 00:12:30,190 and it will become simple. 232 232 00:12:30,190 --> 00:12:32,960 But anyway, let's go back to our code 233 233 00:12:32,960 --> 00:12:36,710 but you will notice that's the code we had before 234 234 00:12:36,710 --> 00:12:39,550 is actually still there. 235 235 00:12:39,550 --> 00:12:40,900 So it's still the same 236 236 00:12:40,900 --> 00:12:45,190 and promise and find have not been replaced. 237 237 00:12:45,190 --> 00:12:47,900 And that's because that's simply not the way 238 238 00:12:47,900 --> 00:12:49,770 it's supposed to work. 239 239 00:12:49,770 --> 00:12:52,430 So instead what polyfilling does 240 240 00:12:52,430 --> 00:12:55,730 is to basically recreate defined function 241 241 00:12:55,730 --> 00:12:58,100 and to make it available in this bundle 242 242 00:12:58,100 --> 00:13:00,103 so that the codes can then use it. 243 243 00:13:01,137 --> 00:13:05,338 `So let's search for array.prototype 244 244 00:13:05,338 --> 00:13:09,570 which remember, is where all the array methods are put. 245 245 00:13:09,570 --> 00:13:13,274 So array.prototype.find. 246 246 00:13:13,274 --> 00:13:17,223 And so, well here it is. 247 247 00:13:18,940 --> 00:13:22,810 So Babel then uses this weird create methods. 248 248 00:13:22,810 --> 00:13:24,530 But what matters here is that 249 249 00:13:24,530 --> 00:13:28,290 this will basically implement array prototype find 250 250 00:13:28,290 --> 00:13:30,270 and the same for find index, 251 251 00:13:30,270 --> 00:13:35,270 every some filter map and also for each 252 252 00:13:36,750 --> 00:13:40,010 even though these less ones here are not ES6 253 253 00:13:40,010 --> 00:13:42,973 but for some reason they are still polyfilled here. 254 254 00:13:44,706 --> 00:13:48,056 Oh right? And the same for promise, probably. 255 255 00:13:48,056 --> 00:13:50,683 Well not probably for sure. 256 256 00:13:51,980 --> 00:13:54,500 Otherwise this is not going to work 257 257 00:13:55,860 --> 00:13:58,660 and it's not easy to find it 258 258 00:13:58,660 --> 00:14:02,300 but well, here's the definition of promise 259 259 00:14:02,300 --> 00:14:04,800 which is going to be global promise 260 260 00:14:04,800 --> 00:14:08,240 but I'm not gonna dig even deeper into this. 261 261 00:14:08,240 --> 00:14:10,820 That's just not really necessary. 262 262 00:14:10,820 --> 00:14:13,050 However, as you just saw before 263 263 00:14:13,050 --> 00:14:16,600 the polyfilling is going to polyfill everything 264 264 00:14:16,600 --> 00:14:18,630 even if we don't need it. 265 265 00:14:18,630 --> 00:14:22,090 So we had to D find index method there as well. 266 266 00:14:22,090 --> 00:14:24,290 Let's actually go back there. 267 267 00:14:24,290 --> 00:14:27,157 So array.prototype.find 268 268 00:14:30,380 --> 00:14:35,050 So it also created find index and every, and some 269 269 00:14:35,050 --> 00:14:37,660 and so we are actually not even using these. 270 270 00:14:37,660 --> 00:14:38,970 And so if we wanted 271 271 00:14:38,970 --> 00:14:40,950 we could cherry pick basically 272 272 00:14:40,950 --> 00:14:44,410 just the features that we actually want to polyfill. 273 273 00:14:44,410 --> 00:14:46,800 Now that of course is a lot of work 274 274 00:14:46,800 --> 00:14:50,400 but it will also greatly reduce the bundle size. 275 275 00:14:50,400 --> 00:14:52,170 And so it might be worth it 276 276 00:14:52,170 --> 00:14:54,180 if that's really a concern. 277 277 00:14:54,180 --> 00:14:56,103 So we could instead of this. 278 278 00:14:56,990 --> 00:14:59,840 So instead of basically importing everything there is 279 279 00:15:00,790 --> 00:15:05,780 we can just say core-js stable and then only array 280 280 00:15:07,790 --> 00:15:10,513 and then find like this. 281 281 00:15:12,840 --> 00:15:14,810 So now if we go back here, 282 282 00:15:14,810 --> 00:15:19,528 then, well then only this one should be here. 283 283 00:15:19,528 --> 00:15:22,350 (indistinct) It looks different now. 284 284 00:15:22,350 --> 00:15:25,750 And so probably only this one was not polyfilled 285 285 00:15:26,869 --> 00:15:30,420 At the same you could do for a promise 286 286 00:15:31,503 --> 00:15:35,580 like this okay. 287 287 00:15:35,580 --> 00:15:37,150 So that's going to be a lot of work 288 288 00:15:37,150 --> 00:15:38,820 which we usually don't do 289 289 00:15:38,820 --> 00:15:41,930 but it is possible again if you are really worried 290 290 00:15:41,930 --> 00:15:43,393 about your bundle size. 291 291 00:15:44,680 --> 00:15:47,613 Finally, just to finish there is still one feature 292 292 00:15:47,613 --> 00:15:51,730 that is not polyfilled by this one here. 293 293 00:15:51,730 --> 00:15:55,020 And so we always need to install 294 294 00:15:55,020 --> 00:15:57,120 just one more package 295 295 00:15:57,120 --> 00:16:02,120 which is called NPM install regenerator-runtime. 296 296 00:16:04,530 --> 00:16:08,040 So regenerator.That's correct. 297 297 00:16:08,040 --> 00:16:13,040 So let's see, let's already include it here. 298 298 00:16:15,060 --> 00:16:20,060 So we need import, so regenerator-runtime/runtime like this. 299 299 00:16:22,820 --> 00:16:27,820 Alright? So this here is for polyfilling async functions. 300 300 00:16:31,100 --> 00:16:33,800 So again, it probably looks a bit confusing 301 301 00:16:33,800 --> 00:16:38,070 that we have to do all of this, but yeah, don't worry. 302 302 00:16:38,070 --> 00:16:41,080 It's just a recipe that you have to follow. 303 303 00:16:41,080 --> 00:16:43,550 Okay. And usually you would put 304 304 00:16:43,550 --> 00:16:46,890 these imports here right at the top of your file 305 305 00:16:46,890 --> 00:16:49,460 but in this case, we can just leave them here 306 306 00:16:49,460 --> 00:16:52,483 because they will be hosted anyway, right? 307 307 00:16:53,320 --> 00:16:56,420 Also keep in mind that all of this might change. 308 308 00:16:56,420 --> 00:16:58,220 And so if you're watching this video 309 309 00:16:58,220 --> 00:17:00,200 like in two years from now, 310 310 00:17:00,200 --> 00:17:02,150 then things might be different 311 311 00:17:02,150 --> 00:17:04,740 and things might not work the same. 312 312 00:17:04,740 --> 00:17:06,870 And so once again make sure 313 313 00:17:06,870 --> 00:17:08,410 that you then install 314 314 00:17:08,410 --> 00:17:11,220 exactly the same versions as I have here 315 315 00:17:11,220 --> 00:17:16,220 especially this core-js and regenerator-runtime. 316 316 00:17:16,640 --> 00:17:19,230 And of course, also parcel. 317 317 00:17:19,230 --> 00:17:22,343 So just as I told you in the last video. 318 318 00:17:24,110 --> 00:17:25,150 Now okay. 319 319 00:17:25,150 --> 00:17:28,270 And with this, we're actually done with this video 320 320 00:17:28,270 --> 00:17:33,090 and also with learning about Modern JavaScript Development. 321 321 00:17:33,090 --> 00:17:36,340 So basically with learning about Tooling, 322 322 00:17:36,340 --> 00:17:41,340 such as parcel and babel and also about modules. 323 323 00:17:41,400 --> 00:17:44,020 Now in the remainder of this section, 324 324 00:17:44,020 --> 00:17:45,680 so the next two videos 325 325 00:17:45,680 --> 00:17:47,700 we will just quickly also talk 326 326 00:17:47,700 --> 00:17:50,260 about modern JavaScript coding. 327 327 00:17:50,260 --> 00:17:53,800 So more on the actual programming side of things. 328 328 00:17:53,800 --> 00:17:57,640 And so there we will learn or actually more review 329 329 00:17:57,640 --> 00:18:00,703 how to write clean and modern JavaScript code. 27895