Support Proposed JavaScript Features with Babel Plugins
We transpile our JavaScript code so we can use modern language features, even if browser support isn't quite where we need it to be. This includes proposed features that aren't yet part of the official language specification. In this lesson, we'll see how we can support the proposed class property syntax for JavaScript with a Babel plugin.
Instructor: [00:00] Let's extend this app component to do a little bit more, so that we can test adding additional syntax support through Babel. I'm going to come down here. The first thing I'm going to do is give this some state. I'm going to set that to equal an object with a count of zero.
[00:17] Now, I'm using this property initializer syntax, where this property just sits right at the root level of the class. This is something that is not yet part of the JavaScript spec. We're going to need to add some Babel syntax support for this.
[00:31] I'm going to come down here, and let's finish building out our counter. I'm going to wrap this in some parens, and throw a div in here. I'm going to leave the h1 in place, then we'll add our counter behavior below that.
[00:46] I'm going to throw an h2 in here, the count, and we'll do this.state.count. Then I'm just going to add a button. I'll give it an onClick. I'm just going to do this all online, because this is sample code, just to demonstrate that we can support the syntax.
[01:10] this.setState, and it's going to depend on the previous state. We'll pass in a function here. We'll return an object with count set to state.count plus one. Then in that button, we'll put a plus sign. Then we'll create a second one.
[01:34] This is just going to be, we'll do state.count minus one. That second button will be a minus sign. We can save this, and then we're going to do an npm run dev. webpack-dev-server will automatically open our browser for us.
[01:59] We're not going to see our app. If we switch back, we're going to see that there was an error compiling this, because it doesn't like the syntax. Babel doesn't know how to handle this by default. In the terminal, let's Control+C to quit that process.
[02:15] Now, we're going to need to install a Babel plugin to support this syntax. We'll do an npm i -d to save this as a dev dependency. We're going to install @babel/plugin-proposal, because this is a proposed JavaScript feature, -class -properties. We'll let that run.
[02:42] It'll install this Babel plugin proposal class properties NPM package, and then I can go into my webpack config. This'll go in our base config, because we want to do this regardless of whether we're building for development or production.
[02:58] Down in our Babel options, after presets, we're going to add another key for plugins. This is another array, and we're going to put our Babel plugin proposal class properties right in there. We can save that, and then back in our terminal, we can run npm run dev.
[03:24] This time, our app loads up, and everything's working just the way we expected it to. If we look back, we have a successful build. All we had to do to support this proposed syntax is add the appropriate plugin to Babel.