This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Configuring Babel" Lesson
[00:00:00]
>> Brian Holt: So, now I want you to create a new file and save it. And it's going to go not in the JS directory, it's gonna go in to the base directory for our project and it's going to be called .babelrc.
>> Brian Holt: Okay, this is how we're going to configure Babel, which is actually gonna do the transformations on our code.
[00:00:29]
>> Brian Holt: So there's a couple things that we're gonna be doing here. We're gonna be using what are called presets.
>> Brian Holt: We're gonna be using two of them, the first one's pretty easy, it's called react. This is actually what's going to do all of our JSX translation. So we're gonna write JSX and that's gonna get transformed to JS.
[00:00:54] Also little known fact about this preset that also includes the flow transformations. So when we go to do flow, we don't have to do anything else, it's already included with react.
>> Brian Holt: Okay, so that's the first one. So to talk about preset, the way that Babel works, Babel is a transpiler or compiler, right?
[00:01:17] You're gonna take one set of source and you're gonna transform it into something else, right? Each kind of transformation is called a plugin, right? So for example, arrow functions, right? Everyone does arrow functions, right? Right, yeah, I thought so. [LAUGH] Arrow functions is one kind of plugin, right?
[00:01:37] So you have a plugin that takes arrow functions and it transforms it into functions. So that individual transformation is called a plugin.
>> Brian Holt: [COUGH] It would be burdensome to include every single plugin that we want right? If you try to include every transformation for ES6 to ES5, that's something, I can't even estimate.
[00:01:59] I'm guessing it's over 50 plugins though. So including each one of those plugins it's kind of really annoying and not necessarily something we wanna do. So, they had the foresight to create things that are called presets, right? And a preset is a group of plugins, that's really all it is.
[00:02:15] So react I believe is three plugins, it's the JSX1, so one of them is so that Babel can understand JSX. One of them is so that it can transform JSX, and then the third one is flow. So I think that's all that's in the react one. A lot of times you'll see people do things like here it says ES2015 right, which is totally valid.
[00:02:44] You could put that and that would transform everything from ES6 or ES2015, those are synonymous terms, to ES5, right?
>> Brian Holt: The problem with this is that we're getting to the point where browsers can understand a lot of ES6, right? So there's no point we should not be transpiling ES6 to ES5 if it already understands ES5.
[00:03:08] So it's kind of this moving target as browsers get better and better, also that we're introducing more and more features, right? Cuz there's ES 2016, 2017, 2018. Yeah, 2018 just standardized, so there's all these new features coming all the time. So as you may imagine trying to keep this up to date is impossible, right, cuz it's always moving.
[00:03:27] It's, unless you're always on that repo every single day, which I'm not. I don't know if you are, but I'm definitely not, it's kind of a pain. So, the current maintainer of Babel, Henry Zhu, or left pad as he's known as on Twitter, came up with this idea for something called env, E-N-V.
[00:03:52]
>> Brian Holt: I love env, this is one of my favorite features of Babel. This is basically the autoprefixer, but for JavaScript. So specifically, what we're gonna do here is we're gonna say, we're gonna put this in an array.
>> Brian Holt: And we're gonna make this an object.
>> Brian Holt: And let's just put that in the same line.
[00:04:23] I'm gonna say targets,
>> Brian Holt: And we're gonna say browsers, and we're gonna set, tell it to target the last 2 versions.
>> Brian Holt: So, what this is going to do is it's a moving target. Basically you're telling it as the browsers keep improving, keep moving that target forward. So this is gonna support, I don't know.
[00:04:52] What are we on for Chrome right now? Not Mac, About Chrome. So we're on version 58 right now for Chrome, right? So it's gonna target 58 and 57, right? And then when 59's released it's gonna target 59 and 58, right? And it's gonna keep moving that forward, same for Firefox, Edge, so far in all those.
[00:05:15] And the way it does there is another package called compat table and it is constantly reading from compat table.
>> Brian Holt: So there is a bunch of things we can do with this. You can say, I think you can say something like Chrome 56 or something like that. I don't remember the exact syntax, but it's similar to that.
[00:05:35] Where you can pin it out a version as well.
>> Brian Holt: So really, really cool, I definitely suggest that if you're doing something like transpiling ES 2015 or something like that then you migrate to Mth, this is gonna be better for you. It's gonna make your bundle smaller and it's gonna make you go faster for sure.
[00:05:53] It's basically cool that it updates itself which that's my favorite thing, code that I don't have to write.
>> Brian Holt: Okay, any questions about env? You can also target things like Node, you can tell it Node versions to target cuz sometimes you need Babel for Node, in fact we will later today.
[00:06:13] You can tell it to target things like IOT, different IOT versions of JavaScript, various different cool stuff. Okay, the next thing, something that I personally do, I leave to your discretion whether or not you want to do it. I'm going to say, loose: true. Set this is JSON so that you can see it better.
[00:06:41]
>> Brian Holt: So a lot of these different ES6 features, and ES6 and beyond. In order to be spec compliant, that is to cover every single use case, the code goes from really small to very large just by handling all of the edge cases, right? Most of the time when you're writing these features, you're not having complex interaction of classes verses generators, right?
[00:07:05] You don't run into these crazy edge cases that they do have to provide for. So that's what loose mode is saying. It's saying, hey, I'm not doing super crazy stuff with the edge cases. Go ahead and include the smaller bit of code rather than the huge bit of code.
[00:07:19] Now, as you might imagine, this is a double edge sword for sure, right? Sometimes you actually might be running into those edges cases. And so if you are, when env moves you to a later version of JavaScript where it's moving you from the transpiled version to the native version and you're running into that edge case, you can have that interaction not be the same, right?
[00:07:40] There's potential for breakage here. This has not bitten me in the ass yet, so, so far, so good. So again, do so at your own discretion.
>> Brian Holt: For example, this workshop today will be totally fine if you put false, your bundle's just gonna be a little bit bigger cuz you're gonna be including more.
[00:08:06]
>> Brian Holt: Lastly, we're going to say "modules": and we're gonna say false here.
>> Brian Holt: And there's a very specific reason that we're doing this, we're telling Babel to not transpile the modules. So typically, what would happen here is Babel would migrate this import React from react. It would transpile this to const React = require('react').
[00:08:38] This used to be required for things like Webpack 1 to work, right? But we're using Webpack 2, and Webpack 2 is ES6 enabled.
>> Brian Holt: So this is basically telling Babel to say, Babel don't touch the modules, Webpack is gonna worry about it. That's what this particular thing here means.
[00:09:01] Because Babel's going to run on the JavaScript code before Webpack starts putting it together, right? So you're just telling Babel to skip the modules, let Webpack worry about it. Any questions about that? The reason why we're doing this is so that we can do that live code inclusion stuff.
[00:09:22] Cuz if it gets transpiled to the dynamic stuff, Webpack is going gonna say, everything's required, right? I don't know what's required, so I'm just gonna include everything. Whereas if you leave it as ES6 modules, it can do that static analysis and say, hey, this code is impossible to run, I'm gonna leave it out.
[00:09:38] So by doing this, we're enabling live code including or tree shaking.
>> Brian Holt: Cool? Okay.
>> Brian Holt: That's it, [LAUGH] that's where Babel is set up for now.
>> Brian Holt: But I wanted to take the time to explain to you so you understand everything that's going into this, right? So it's not black magic, I mean Babel's kind of black magic still.