Okay, so I call this series ECMAScript 6 Cliff Notes. As quickly as we can, I'm going to get you up to speed on all the new cool stuff you can do. As a quick little example, you may not know this, but Laravel Elixir has tons of JavaScript within it. So let me show you some of the stuff we're able to write now. For example, I have a task collection. So notice right off the bat, we can use a more traditional class syntax. Now, as it turns out, this is just sugar for using the typical prototype, but this is a lot more friendly, especially to back-end developers. We can import modules. Notice we can now set a constructor, and we even have methods where I'm not constantly rewriting that function, quote-unquote, keyword. And further, I don't have it here, but if I prefix that method with the keyword static, it then becomes a static method, which is cool. Kind of nice. Further,

what else? Well, we can see down here, they recommend adding a script section to your package.json file. And basically, this is like an alias. So when I have scripts build, that's like saying, well, if you type npm run build, behind the scenes, I want you to trigger this command here. It's just an alias. So why don't we add this? Why don't we use Sublime in the series? And we'll paste this in. Now though, we need to know what this actually does. Okay, we're going to run the Babel compiler on a source directory. So this assumes the folder is named source. Let's go ahead and create that. All right, so now I have a source folder where all of my JavaScript files will go. Next, -d, that's an option for the output directory. So why don't we do it like this? source output for our demo here. And I will go ahead and create that one as well. So now, why don't we test this out, but it's not going to work just yet. So let's use a simple

Source output for our demo here. And I will go ahead and create that one as well. So now, why don't we test this out, but it's not going to work just yet. So let's use a simple Person class so that we can try out this class syntax that seems kind of nice. And we'll say constructor name, this.name equals name. Okay, so this looks good. But if I switch back, I should be able to run npm run build, right? And that will trigger this. Okay, let's try it. npm run build. Okay, it seems like it worked, right? It compiled down. However, if we take a look at this, identical, right? So this can be kind of confusing. Old versions of Babel did not work this way, but the new ones too. So out of the box, Babel doesn't necessarily do anything. You can see that right here. Babel 6 does not ship with any transformation enabled. Instead, you have to pull in specifically what you want. Or you can pull in these presets,

You can see that right here. Babel 6 does not ship with any transformation enabled. Instead, you have to pull in specifically what you want. Or you can pull in these presets, which are sort of like collections of the transformations you want. And that's what people generally do. So if you want most of the ES6 transformations or ES2015, as we discussed, then we can pull in that preset. All right. So once again, I will paste that in. That looks good. And then finally, the only remaining step is, well, yes, we pulled it in, but we haven't told Babel about it. So that's our final step. We create a .babelrc file where we specify which preset we want to use. So I'm going to copy that line, paste it in. And if I switch back to Sublime, yeah, it's pretty simple stuff, right? We have an object here. It's just configuration. The preset we want to use is ES2015. And I just pulled that in right here. Babel preset ES2015.

Okay. Well, we learned we no longer need this function keyword. I can just name it like so. And why don't we return this.name says hello. And in fact, we can actually clean this up a bit more by using template strings. But I'm going to save that for a future lesson. So I will say review template strings if you want some bonus credit. Okay. So one more time, I'm going to compile this down. And then let's create a dummy index file so that we can test this out. output/person.js. And then we'll say hello world here. All right. Does that make sense? So we wrote our source code. We have a class. And then for convenience at the bottom, we new up that class, we call a method greet on it, and we log that to the console. Then within an index.html file, we import the output version. So let's see. I'm going to open this in my browser, open up Chrome DevTools with Shift Command C, and sure enough, that works.

Then within an index.html file, we import the output version. So let's see. I'm going to open this in my browser, open up Chrome DevTools with Shift + Command + C, and sure enough, that works. Okay. So let me take one more minute of your time. If we were to reference the source directory version of person and give that a refresh, we still get the exact same thing. And just for clarity, I'm using Chrome 49. So yeah, a lot of this new stuff is being implemented by the latest browsers. And like I said, if you get Chrome Canary, it's almost like 99% implementation. So the point you should take from this is if you just want to play around with things, you don't need to worry about Babel at all. But when you do need to worry about Babel is when you push this up to production and you have no clue which browser will be used to access your site. So yeah, in development while learning, you can use Chrome Canary

you push this up to production and you have no clue which browser will be used to access your site. So yeah, in development while learning, you can use Chrome Canary natively. No problem there. But for production, you'll probably want to use something like Babel. Okay. So that does it for this lesson, sort of the makeshift setup. In the next lesson, if you happen to be a Laravel user, I'll show you what Laravel Elixir provides in terms of all of this setup. And I think you'll like it.