ECMAScript6

1, ES6 Profile

1.1 What is ES6

ECMAScript 6.0 (hereinafter referred to as ES6) is the next generation standard JavaScript language, has been officially released in June 2015. Its goal is to enable JavaScript language can be used to write large complex applications, enterprise-class development language.

1.2, ECMAScript and JavaScript relations

A common question is, ECMAScript and JavaScript in the end what is the relationship?

Talk clearly this problem, we need to look back at history. In November 1996, the creators of Netscape's JavaScript, JavaScript decide to submit to a standards body ECMA, this language can hope to become an international standard. The following year, ECMA released the first version of the standard No. 262 document (ECMA-262), provides a standard browser scripting language, and this language called ECMAScript, this version is version 1.0. The standard is for the JavaScript language developed from the beginning, but the reason is not called JavaScript, for two reasons. First, trademark, Java is a trademark of Sun Microsystems, according to the licensing agreement, only Netscape's JavaScript can legally use the name, JavaScript and Netscape itself has been registered as a trademark company. The second is to reflect the language of the makers are ECMA, not Netscape, this will help to ensure the openness and neutrality of the language. Therefore, the relationship ECMAScript and JavaScript is that the former is the latter specification, which is an implementation of the former (another ECMAScript and JScript dialects as well as ActionScript). Everyday occasions, the two words are interchangeable.

1.3 Why learn ES6?

This problem can be converted ask the question, is the completion of es6 will give us what kind of development of convenience? chrome explain javascript engine, called V8, a V8 engine, the man was transferred to the server, so the server can also write javascript, which runs on the server side js language is Node.js. Node.js once available, its superior performance to the performance of a lot of web-based framework nodejs have emerged, express is one, and was followed by a full stack MEAN mogoDB, Express, Vue.js, Node .js development, javaScript increasing use of web to every corner of the field, js can do more and more. Babel ES6 transcoder is a widely used, can be converted to the code ES6 ES5 code to execute in a conventional environment. This means that you can write programs ES6 way, and do not worry about whether to support the existing environment. nodejs is a development trend, Vue.js front-end frame which is a development trend, ES6 are used by universal trend. At present, some front-end frame are in use ES6 syntax, such as Vue, React, D3, etc., so ES6 also good to learn basic front-end framework.

2, ES6 environment to build

Because some low version of the browser does not support syntax ES6, so without using frames, you need to convert ES6 syntax is ES5 syntax.

2.1, preparation

First create a project, the project has two folders, src and the dist, a html file

src: js file will be prepared for ES6 into this folder (here index.js file)

dist: Babel through js file compiled into this file of ES5 (here index.js file)

html: Note: dist will be introduced in the compiled file into the HTML file, not in the js file src

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="./dist/index.js"></script>
 7 </head>
 8 <body>
 9     Hello ES6
10 </body>
</11 html>

2.2, ES6 environment to build

The first step :

In the src directory, create index.js file. This file is very simple, we only make a declaration of a variable, and () printed with console.log.

let a = 1;
console.log(a);

Step two :

In the root directory of the project and build the project initialization file package.json (can be modified according to their needs)

cnpm init -y


{
    "name": "es6",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
     },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

The third step :

Babel install plug-ins (to convert ES6 syntax is ES5)

cnpm install -g babel-cli

Step Four :

Of course, the normal conversion is not yet, also you need to install a required package ES5

After cnpm install --save-dev babel-preset-es2015 babel-cli installation is complete, package.json subject to change

{
    "name": "es6",
     "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
    }
}

the fifth step:

Add a .babelrc file in the root directory of the project, and add content

{
    "presets":[
        "es2015"
   ],
    "plugins": []
}

.Babelrc create files in windows system method

Method One: root directory, create a ".babelrc." File name on it! (After a total of two points)

Method Two: cmd into the root directory, enter "type null> .babelrc", press Enter!

Step Six:

After installation is complete, we can convert the command

babel src/index.js -o dist/index.js

Step Seven:

The command can be simplified (package.json configurable)

"scripts": {
    "test": "echo "Error: no test specified" && exit 1"
},

change into:

{
    "name": "es6",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "babel src/index.js -o dist/index.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1"
    }
}

Then we can escape code the following command:

altitude test run

React_01_ECMAScript6