ECMAScript 6 today with Babel.js

Javascript is the most popular language in github.com according to githunt.info . Javascript is available to every browsers , most of the new smartphones , Tabs, TV’s and even on some fridges ! There is a new version of javascript which has been a lot of talks and it will bring tons of exciting new features. Officially called ECMAScript 6, JavaScript 6 is a few months away from being officially a recommendation. ECMAScript 6 in not officially supported on major browsers yet. But at the time of this blog post , May 4 2016, the canary version of chrome supports 95 to 99% of the ACMEScript 2015 specs. Now as I say 2015, if you are curious about the differences, as I understand it as a sort of the formality. Like ACMEScript 2015 is renamed to ACMEScript 6. But like me , most people call it simply ES6 and that’s what I will stick with 🙂 Now if you are really confused about JavaScript and ACMEScript well, ACMEScript is the actual underline language. You can say the core standard language is ACMEScript . Then you have things like JavaScripts and node.js . To me when I’m talking about the ACMEScript , it’s about the next JavaScript technique you can use.

Now check the cool syntax:

1

[1,2,3].map(n=>;n+1);

But it’s not supported in the browsers. So we’ll need to have a middleman. So we need to take away this new code, compile it down to vanilla javaScript that every browsers understand and that is what we will ultimately serve in production. So it’s sort of the best for both worlds. But however like I said, if you are playing with chrome canary you can have all those stuffs natively without worrying about any transpiler like Babel.

It’s available to every build system possible. By the way, if you are using Laravelelixir, you don’t really need to think about that. Anyway. So the basic option is to use the command line. So first, we are going to install babel CLI. Let’s make a directory called “Learning-ES6” cd into that directory and let’s create a package.json file real quick by hitting this command:

So what’s next ? As their recommendation , let’s add a “scripts” section in the package.json file and basically this is like an alias. So the final package.json should looks like this

1

2

3

4

5

6

7

8

{

"scripts":{

"build":"babel src -d lib"

},

"devDependencies":{

"babel-cli":"^6.0.0"

}

}

We are going to run babel compiler into the src directory. So this assumes the folder name is src. Let’s create that inside our project folder. Let’s create another directory name lib in the project directory that will output the vanilla version. Now let’s try out some cool syntax.

1

2

3

4

5

6

7

8

9

classPerson{

constructor(name){

this.name=name;

}

}

Now let’s run npm run build. In your lib folder you will find the source like the bellow one, which will work on all major browsers !

1

2

3

4

5

6

7

8

9

"use strict";

function_classCallCheck(instance,Constructor){if(!(instance instanceofConstructor)){thrownewTypeError("Cannot call a class as a function");}}

varPerson=functionPerson(name){

_classCallCheck(this,Person);

this.name=name;

};

Yeah, it’s a little confusion to read, but you really need not to worry about. You can stick to your src directory and understand regardless of what you write babel will make your browser it understand. This is for now today. Later I will show what laravel elixir provides in terms of all of this setup.

Shibly is a *nix fan, open source enthusiast and passionate software engineer. He Loves music, hacking and playing PC video games. Currently he holds a 980ti SLI rig ! He also likes to play with anything cool. He is also a partner & technical director at QuantikLab

Related Articles

GET A WEB DEVELOPMENT QUOTE

Do you have a question about web design and development? We are prepare to answer all of your questions. We always assist our clients to run business smoothly in a complete technology agnostic way. We are devoted to provide the best in class services by maintaining the timeline. We guarantee perfection. Send us your requirements, we'll extract it, do necessary RnD and will provide you something that will definitely amaze you.

WHAT OUR CLIENT THINKS

We have worked with many different offshore web development companies in the past. But would just like to say that the people at QuantikLab are the best! Extremely professional yet very personable! Very clean and scalable work and always right on time! Since we started working with them, never had to use another development company for any of our web design needs.

Jeff Anderson

QuantikLab is absolutely the best, their vary reliable and always on time.

William alkins

Follow Us

LinkedIn

Skype

GitHub

About Company

QuantikLab Is an Outsourcing Web Design Company and We provide the BEST possible web business solution to our client that current technology allows within their budget. Repeating business and long lasting relationship is very important to us and we strive to maintain that.