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

Posted zheoneandonly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6入门一:ES6简介及Babel转码器相关的知识,希望对你有一定的参考价值。

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

 一、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版本的下一代标准,涵盖ES2015、ES2016、ES2017等。也有人称ES2016为ES7、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/plyfill --save-dev //在当前工作区间安装babel/plyfill插件

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

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

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

@babel/plyfill :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

 

...未完待续。

以上是关于ES6入门一:ES6简介及Babel转码器的主要内容,如果未能解决你的问题,请参考以下文章

ES6 简介

ES6标准入门 第一章:简介

ES6入门十二:Module(模块化)

Babel 入门

Babel 入门

ES6学习— Babel转码器的使用和配置