ES6入门一：ES6简介及Babel转码器

• ES6简介
• Babel转码器
• Nodejs中使用ES6
• WebPack中使用ES6及Babel转码插件

 1、ES6简介与转码

 1.1一个常见的问题，ECMAScript和JavaScript究竟是什么关系？

• 1996年11月，JavaScript的创造者——Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，但愿JavaScript这种语言可以成为国际标准。
• 1997年,ECMA发布262号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是ES1.0。
• ECMA全称European Computer Manufactuers Association，翻译过来的中文名叫作“欧洲计算机制造联合会”，这个组织的目标是评估，开发和承认电信和计算机标准。始建于1961年，可是为了创建统一的电脑操做格式标准--包括程序语言和输入输出的组织。

一个常见的追问，为何使用ECMAScript这个名称，而不是JavaScript？

• 一是商标问题：Java是Sun公司的注册商标，根据受权协议，只有Netscape公司能够合法的使用JavaScript这个名字，并且JavaScript自己也已被Netscape公司注册为商标。
• 二是语言全部归属问题：ECMAScript这个名称体现出这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript和Javascript的关系是，前者是后者的规格，后者是前者的一种实现。另外ECMAScript方言还有JScript和ActionScript。

1.2ES6与ECMAScript2015的关系？

ECMAScript2015简称为ES2015。2011年ECMAScript 5.1版本发布，6.0版本开始制定，ES6这个词原意指javascript的下一个版本。可是因为这个版本引入的版本语法太多，并且制定过程当中还有不少组织和我的提交新功能。所以，不可能在同一个版本里包含全部将要引进的功能。常规的作法是先发布6.0版本，而后过段时间发布6.1，6.2，6.3.....版本。可是标准委员会为了让标准升级成为常规流程，让任何人在任什么时候候均可以提交新语法提案，而后标准委员会每月开一会，评估这些提案是否能够接受，须要哪些改进。通过屡次会议后，若是一个提按足够成熟即可进入标准。而后，每一年6月发布一次标准。

ES6第一个版本就这样在2015年6月发布，正式名称是《ECMAScript2015标准》（简称ES2015）。一般ES6被泛指为ES5.1版本的下一代标准，涵盖ES201五、ES201六、ES2017等。也有人称ES2016为ES七、ES2017为ES8，以这样的方式描述的化今年的ES2019就是ES10。

注：ECMAScript迭代的目的是为了让JS语言能用于编写复杂的大型应用程序，成为企业级开发语言。

 

TC39（Technical Committee 39）是一个推进JavaScript发展的委员会，github链接：https://github.com/tc39，官方网站：https://tc39.es/若有兴趣了解最新JS提案能够查看这两个网站。

欧洲计算机制造商协会官网：https://www.ecma-international.org

 

 1.3Babel转码器

因为浏览器还存在一些对新语法的支持，特别是在老版本的浏览器上，为了在开发中可使用新的语法在浏览器和其余环境中能够执行，能够借助转码工具将新语法转码成ES5，来实现生产开发的统一性，可是不是全部新语法均可以被转码的。

新的语法并不改变语言的特性，只是在原有的语法基础上新增一些语法糖。只是为了增长代码的可读性，从而减小代码的出错机会。

Babel官网：https://www.babeljs.cn/

Babel在线工具：https://www.babeljs.cn/repl

配置安装及说明：

1 npm init -y //初始化项目配置（自动生成一个package.json文件）
2 npm install @babel/core --save-dev //在当前工做区间安装babel/core插件
3 npm install @babel/cli --save-dev //在当前工做区间安装babel/cli插件
4 npm install @babel/preset-env --save-dev //在当前工做区间安装babel/preset-env插件
5 npm install @babel/polyfill --save-dev //在当前工做区间安装babel/plyfill插件

@babel/core ：babel核心工具包，用来将JS代码转换成抽象语法树

@babel/cli ：babel手脚架，用来开启指定调用插件编译代码

@babel/preset-env：babel具体解析ES6语法的工具集合，这个集合只用来解析新的js语法，不转换新的API

@babel/polyfill ：babel用来解析新的API，好比：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（好比Object.assign、Array.from）。这里有一篇使用教程：https://blog.csdn.net/qq_21294095/article/details/88812344

配置文件.babelrc

该文件用来设置转码规则和插件，基本格式以下：

1 {
2     "presets": [
3         //预设编译插件
4         "@babel/preset-env"
5     ],
6     "plugins": [
7         //引用外部编译插件
8     ]
9 }

测试babel编译：

let a = 10; //在当前工做区间下建立一个index.js文件并写入这行代码

使用bebel/cli命令编译index.js文件

npx babel index.js -o compiled.js

编译完成后会在当前工做区间下新增一个compiled.js文件，文件里面的内容以下：

1 "use strict";
2 
3 var a = 10;

--watch实现时实监听编译，就是只须要编译一次后，只要在修改源文件，编译文件就会自动生成最新的代码

npx babel index.js -o compiled.js --watch

ES7语法的编译插件（支持私有属性）：

在class中写静态属性并赋值的方式，是ES7的写法，在老版本的浏览器中不能识别（报错），我是用最新的chrome浏览器已经能识别。可是，目前来说浏览器能不能识别并不重要，由于咱们在使用ES6仍是ES7的时候都会使用编译工具进行降级，在babel中我使用的7.5.5版本都不支持编译示例中的静态属性的语法，在编译的时候回报如下错误：

Support for the experimental syntax 'classProperties' isn't currently enabled (2:11):

  1 | class Foo{
> 2 |   static e = [1,2,3];
    |            ^
  3 |   static bar(){
  4 |           return "bar";
  5 |   }

但同时，在后面babel也提示了能编译这个语法的插件：

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

下载插件：

npm install @babel/plugin-proposal-class-properties --save-dev

而后在（.babel文件中配置，这种模式任选一种配置，这里我选择了宽松模式）：

 1 //严格模式
 2 {
 3   "plugins": ["@babel/plugin-proposal-class-properties"]
 4 }
 5 //宽松模式（我测代码时使用了这个）
 6 {
 7   "plugins": [
 8     ["@babel/plugin-proposal-class-properties", { "loose": true }]
 9   ]
10 }

关于插件的配置详细手册能够查看babel的官方手册：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

私有方法的插件：

使用私有方法时，babel编译器还须要一个的插件：

npm install @babel/plugin-proposal-private-methods --save-dev

而后，再.babel文件中配置：

1 {
2     "presets":[
3         "@babel/preset-env"
4     ],
5      "plugins": [
6         ["@babel/plugin-proposal-private-methods", { "loose": true }] //引入支持编译私有方法的插件
7     ]
8 }

详细能够了解：https://babeljs.io/docs/en/babel-plugin-proposal-private-methods#via-cli

 ES7装饰器（Decorator）转码插件：

npm install --save-dev @babel/plugin-proposal-decorators

在.babelrc中配置装饰器：

1 {
2   "plugins": [
3     ["@babel/plugin-proposal-decorators", { "legacy": true }],
4     ["@babel/plugin-proposal-class-properties", { "loose" : true }]
5   ]
6 }

装饰器配置手册：https://babeljs.io/docs/en/babel-plugin-proposal-decorators#legacy

一个装饰器问题：https://github.com/WarnerHooh/babel-plugin-parameter-decorator/issues/1

 

...未完待续。