- ES6 Profile
- Babel transcoder
- Nodejs used ES6
- WebPack used ES6 and transcoding plug Babel
A, ES6 Introduction and transcoding
1.1 A common problem, ECMAScript and JavaScript in the end what is the relationship?
- In November 1996, the creator of JavaScript --Netscape company, decided to submit to the International Organization for Standardization JavaScript ECMA, JavaScript hope that language can become an international standard.
- In 1997, ECMA released the first edition of Standard No. 262 document (ECMA-262), provides a standard browser scripting language, and this language called ECMAScript, this version is ES1.0.
- ECMA stands for European Computer Manufactuers Association, translated Chinese name called "European Computer Manufacturers Association," The goal of this organization is to evaluate the development and recognition of telecommunications and computer standards. Founded in 1961, but in order to establish a unified format standard computer operation - including programming languages and input and output of the organization.
A common questioning why ECMAScript use this name instead of JavaScript?
- One question mark: Java is a registered 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.
- Second, the ownership of all language: ECMAScript name reflects the language of the makers is ECMA, rather than Netscape, this will help to ensure the openness and neutrality of the language.
Therefore, the relationship between Javascript and ECMAScript is that the former is the latter specification, which is a former achieved. In addition ECMAScript and JScript dialects as well as ActionScript.
1.2ES6 relationship with ECMAScript2015 of?
ECMAScript2015 referred to as the ES2015. 2011 Nian ECMAScript 5.1 release, version 6.0 began to develop, ES6 original intent of the word refers to a version of javascript. However, due to too many versions of this release introduces syntax, and the development process, there are many organizations and individuals to submit new features. Therefore, it can not contain all the features that will be introduced in the same version. Conventional practice is to release version 6.0, and then released over time ..... 6.1,6.2,6.3 version. But the Standards Committee in order to allow the standard upgrade become a routine procedure, so that anyone can submit a new proposal at any time syntax, and then a month to open a standards committee will assess whether the proposal is acceptable, what needs to be improved. After many meetings, if a mention by mature enough can enter criteria. Then, in June each year publish a standard.
ES6 first version thus released in June 2015, the official name is "ECMAScript2015 standards" (referred to as the ES2015). ES6 is usually refers to ES5.1 version of the next-generation standard, covering ES2015, ES2016, ES2017 and so on. There are people ES2016 is ES7, ES2017 is ES8, in such a way of describing this year's ES2019 is ES10.
Note: The purpose is to enable the iteration ECMAScript JS language can be used to write large complex applications, enterprise-class development language.
TC39 (Technical Committee 39) is a committee to promote the development of JavaScript, github connection: https://github.com/tc39 , the official website: https://tc39.es/ are interested in learning the latest proposal can view both JS website.
European Computer Manufacturers Association's official website: https://www.ecma-international.org
1.3Babel transcoder
Because browsers are still some support for the new syntax, especially in the old version of the browser, in order to develop the possible new syntax can be executed in the browser and other environments, you can make use of transcoding tool to add new syntax turn code to ES5, to achieve the unity of production and development, but not all of the new syntax can be transcoded.
The new grammar does not change the characteristics of the language, just to add some syntactic sugar on the basis of the original grammar. Just to increase the readability of the code, thus reducing the opportunities for error code.
Babel's official website: https://www.babeljs.cn/
Babel online tools: https://www.babeljs.cn/repl
Installation and configuration instructions:
. 1 NPM the init -Y // initialize project configuration (automatically generate a file package.json) 2 NPM the install @ babel / core --save // dev-installed in the current working range Babel / Core plug . 3 NPM the install @ Babel / CLI - -save-dev // in the current workspace installation babel / cli plug 4 npm install @ babel / PRESET --save-dev-env // in the current workspace installation babel / PRESET- env plug 5 npm install @ babel / plyfill - -save-dev // install babel / plyfill plug-ins in the current workspace
@ Babel / core: babel core kit, used to convert the code into an abstract syntax tree JS
@ Babel / cli: babel scaffolding, used to open the call of specific plug-compiled code
@ Babel / preset-env: babel specific analysis ES6 grammar tool set, this collection is only used to parse the new js syntax does not convert the new API
@ babel / plyfill: babel the API used to parse the new, for example: Iterator, Generator, Set, Maps , Proxy, Reflect, Symbol, Promise and other global object, some definitions and methods (such Object.assign, Array on global object .from). Here is a tutorial: https://blog.csdn.net/qq_21294095/article/details/88812344
Profile .babelrc
This file is used to set and plug transcoding rule, the basic format is as follows:
. 1 { 2 "Presets" : [ . 3 // default widget compiled . 4 "@ Babel / PRESET-the env" . 5 ], . 6 "plugins" : [ . 7 // reference to an external compiler plug 8 ] 9 }
Test babel compiled:
A 10 = the let; // create a file in the current working index.js interval and writes this line
Use bebel / cli command file to compile index.js
npx babel index.js -o compiled.js
Compiled.js will add a file in the current workspace After compilation, the file which reads as follows:
1 "use strict"; 2 3 var a = 10;
--watch real listening compile-time implementation, which is only needs to be compiled after the first, as long as the modified source files, compiled files will automatically generate new code
npx babel index.js -o compiled.js --watch
... To be continued.