تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Class Properties Fail Compile0:00

Now sometimes you'll want to leverage functionality that isn't available and mix out of the box. For example, yes, you could set up a class, but maybe you want to use the class properties feature. This allows you to say things like foo equals bar rather than having to assign it in the constructor. But this isn't part of the official spec yet, so Babel is not going to include it for you. I think at the time of this recording it's at stage 2. So yeah, let's just see what happens if we try to compile this down. It should fail because Babel doesn't recognize this syntax. Yep, syntax error. Unexpected token. So yeah, it came here and it's like, hmm, I don't really know what this is. You're using something I don't yet recognize. So what do we do in these cases? Well, let's take a look. We'll go to docs, plugins. You'll see that out of the box we use this preset, and that will automatically

Choosing the Babel Plugin0:42

So what do we do in these cases? Well, let's take a look. We'll go to docs, plugins. You'll see that out of the box we use this preset, and that will automatically determine which ones we want. But it does not include any of these stage-x presets. So let's take a look. Stage 2, transform class properties. This is the one that we want. So you'll see here we can create a property like so and then compile it down. Okay, let's see if we can pull that in. The first step is we will install it, and next we need to reference it. And traditionally you do that through a .babelrc file. So let's grab that. We're going to switch back to code. Now my plan is to at some point introduce a bit of sugar for updating your .babelrc. But at the time of this recording, that's not yet available. So instead, in our workspace, I will create a .babelrc file, and then we'll paste in our

Adding .babelrc in Mix1:26

for updating your .babelrc. But at the time of this recording, that's not yet available. So instead, in our workspace, I will create a .babelrc file, and then we'll paste in our new plugin here. So the way it works behind the scenes is Laravel Mix will check to see if you have this file created. If it does, then we will read it and merge it with Mix's default .babelrc file. So you get the best of both worlds there. All right, let's give it a shot. Now you'll remember before it failed to compile, but now it won't. We're all set. So if we take a look at our compiled file, yeah, so you'll see, let's see what we had before. Here's what we had before, just the class syntax, the shorthand there. But if we switch back, it will turn Person into a traditional function and then assign it directly to the constructor. Now you can even create static properties. So you could say static $baz = 'baz', and we'll compile that down. Let's see what

Verifying Static Properties Output2:11

traditional function and then assign it directly to the constructor. Now you can even create static properties. So you could say static baz equals baz, and we'll compile that down. Let's see what that looks like. All right, switch back. And yeah, so foo was assigned to the instance, and of course baz was assigned directly to the constructor function itself. That's how that works, which means you could do things like new Person.foo would give you bar, or Person.baz would of course give you baz. I think at some point there's even support for private properties, something like that, but I don't think that's going to work at the moment with Babel. Maybe that's still under discussion. Yeah, you can't do that just yet, once again at the time of this recording. But anyways, that's all you need to know. So if you come across some new functionality or some new spec that you'd like to leverage in your own projects, yeah, in those cases just create your own Babel

Recap: Custom Babel Config3:00

that's all you need to know. So if you come across some new functionality or some new spec that you'd like to leverage in your own projects, yeah, in those cases just create your own .babelrc file. Mix will read that, merge it with its own plugins, and then compile everything down.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟