Configuring Babel for Webpack

[00:00:00]
>> Speaker 1: Yeah, I was curious about, can you talk a little bit about ES6 and Babel, and the necessity for that? Because I think it was prior to webpack two or maybe three, you needed Babel to use modules.
>> Sean Larkin: Technically no, you didn't, prior to webpack two, that's right, correct.

[00:00:19]
>> Speaker 1: But I guess, could you clear up, cuz I was just under the impression, if you wanted to use ES6, you had to use Babel with webpack. And obviously, we're not doing that and we're using ES6 just fine.
>> Sean Larkin: Yeah, remember early on when I talked about modules, I made the clear distinction between ES6 and then ESM, the modules itself.

[00:00:36]
Webpack since version two has supported ES modules out of the box. What is kind of a common pitfall is that people will have presets like Babel preset 2015, which by default transpiles ES modules into common JS syntax, and so they might not know it. So if you actually look in the Babel documentation, Babel JS, preset ENV is probably the new popular one that I would recommend to everybody, especially for performance.

[00:01:14]
So what you'll realize is that even here, by default, if you use this preset, it's gonna down convert ES modules to common JS, now why is that bad? Because you just de-opted, you just opted out of every webpack optimization. So we will not scope hoist, we will not tree shake, we will not do any things with common JS modules.

[00:01:37]
Which is also why I get frustrated with React, because they're still shipping common JS, but anyways, I digress. However, there's an option in this preset to turn it off, so modules false.
>> Sean Larkin: So anytime that you use either preset EMV, preset 2015, 16, or 17, whatever, always set modules false if you're gonna use Babel.

[00:02:11]
But at the end of the day, you can use any syntax, as long as webpack's Acorn parser can parse the syntax, it's not that crazy new, webpack can perfectly fine traverse any module that's using ES6. Right, the only reason why you would need Babel to down convert it is if you're shipping to a browser that doesn't support it.

[00:02:36]
Right, so you can still choose to, I mean, and even then, if you're a library author, I say, ship the raw source, don't transpile it at all, and let your consumers use Babel preset EMV. Right, because this gives you the option to choose what browsers you're targeting and to only transform syntax that isn't supported, right?

[00:02:56]
>> Speaker 1: More specifically, I guess I was giving modules as one example, but what isn't just supported out of the box for ES6, not just ESM?
>> Sean Larkin: Anything that's before stage two, I think, like for example, you can use async await anywhere in your code, and webpack's not gonna choke.

[00:03:16]
The only thing is, if Acorn doesn't implement a syntax, then of course it's gonna cause AST errors, right? Because that's what we do, we traverse the entire AST. So if it's a crazy new syntax that maybe might not be supported yet cuz it's stage zero through two, then you'll probably need Babel to throw it through a loader, and before it parses the AST, down-convert it.

[00:03:41]
But in most cases, as long as you're not, I even think object rest spread might work.
>> Sean Larkin: We could technically just find out, we have the technology. So let's see, where's an object we got here? I guess I could say,
>> Sean Larkin: Here we go,
>> Sean Larkin: Right, what if I run this in dev mode, what happens?

[00:04:19]
>> Sean Larkin: Object rest spread, totally legit. So I mean, there's gonna be cases where you might not have something, I don't know, what's a good stage one or zero crazy syntax? What is a good stage, let me see it, it actually should tell me.
>> Speaker 3: [INAUDIBLE]
>> Sean Larkin: Yeah, that's the question mark dot question mark dot question mark, right?

[00:04:44]
Okay, that's a good one, that's great, actually. So I can say,
>> Sean Larkin: I don't know, Halloween, right, Halloween, not weed. [LAUGH] Okay, cool, I guess you also need a question mark at the ending one, right, I can never remember. Okay, so this is technically stage one, right, or stage zero?

[00:05:13]
>> Speaker 1: Stage one now.
>> Sean Larkin: Okay, but hey, look, we choked cuz Acorn doesn't know this. And the Acorn parser team will not implement anything until it's stage four, I think, right, and that's where browsers implement it. Or late stage three, we begged them, we were like, please can you do async await, cuz everybody's requesting it.

[00:05:33]
And we don't wanna force people to use Babel if they don't have to, right? And the reason, well, no, the browsers just got it in really fast, and you wanna know why? It's because async await transpiles to about 80 lines of ES5. And it's specifically because of the yield and generator run time and all that stuff.

[00:05:57]
So they were like gosh, we don't want people shipping, cuz the amount of code bloat you get is huge. So that's why I say use browser preset EMV, so that you're only transpiling stuff that really needs to be transpiled. But yes, thank you, that's a great example where we will choke in some cases and then you do need to use Babel if you wanna support this wild syntax.

[00:06:20]
Any other questions?
>> Speaker 3: So my question would be, could you use stage zero Babel, but then say modules falls, and then get the tree shaking?
>> Sean Larkin: Technically, as far as I understand, you can use browser preset EMV, and it knows when you're using a stage zero, I guess.

[00:06:44]
It has this crazy heuristic where the whole point is that it'll see and say, no, no, no, no, we gotta transpile this back to something the browser understands.
>> Sean Larkin: So yeah, absolutely, that's when you would wanna use Babel loader, right? Or if you're using, well, TypeScript does that for you, if you're using, yeah, I guess you could say, if you're using React and do a and you gotta use the broken Decorator syntax, gotta use.

[00:07:19]
That's stage two, it's never gonna be implemented that way, cuz it's the hash symbol now instead of the at symbol. So you would need to use Babel to transpile that, right? I think it's called Decorator stage two legacy or something, and EMV handles that for you also. Maybe we need to get Henry Zoo up in here on a Frontend Masters course.

[00:07:43]
>> Sean Larkin: I'll make a call, [LAUGH] cool.