ES6标准简介之Babel转码器解说

　　ES6是ECMAScript 6的简称，是JavaScript语言的下一代标准，现在基于jquery库的前端开发js所使用的标准是ES5（ECMAScript 5）。ES6已于2015年6月正式发布。它的目标是使JavaScript语言可以用于编写复杂的大型应用程序。ES6是一个泛指，含义是5.1版本以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等。

　　由于现在各大浏览对ES6的支持程度不一，所以在开发过程中需要使用ES6的转码器 —— Babel,它可以将ES6代码转化为ES5代码，方便在浏览器环境中执行，大家可以参阅http://kangax.github.io/compat-table/es6/了解各大浏览器对ES6的支持情况。就现在目前三大新的JS框架中都是使用es6语法，这三大框架集成前端自动化打包工具 —— webpack和ES6转ES5的转化器 —— Babel，在新的框架下面就不用操心怎么转换了。

　　学习过ES6的同学都应该知道箭头函数，那箭头函数和ES5中的function函数有什么区别呢，下面我们先来看一段代码再跟大家说明一下最主要的区别

1 //ES6
2 input.map(item => item + 1);
3 
4 //ES5
5 
6 inout.map(function (item) {
7     return item + 1;
8 });

箭头函数和function函数对比

　　不知道大家有没有看出什么细微的差别，但是很明显的一点就是ES6标准下的箭头函数简单了很多，方便我们书写代码，开发项目和维护。这两者之间最主要的区别在于this指向，箭头函数的this指向不会改变，但function函数的this指向会改变（这也是当时自己第一次找工作面试官问我的最简单的一道面试题，当时没有回答上来，所现在对ES6的箭头函数和ES5的function函数的区别记得特别牢靠）。上面这段代码ES6的箭头函数经过Babe转码器转码之后就形成ES5的function函数。在新的js框架中集成Babel转码，所以每个项目都会有一个.babelrc的配置文件，很多时候这个文件不需要改动　本文件的基本格式如下：

1 {
2     “presets”: [],
3     "plugins": []  
4 }

.babelrc配置文件基本格式

　　当然如果你只是为了熟悉使用babel，你完全可以使用命令行转码 —— babel-cli，安装命令如下：

　　npm install -global babel-cli

　　基本用法如下：

　　babel example.js

　　Babel 只转换新的JavaScript句法，而不转换新的API，如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及这些定义在前句对象上的方法都不会转码，要想对这么对象进行转码，就得使用babel-polyfill为当前环境提供一个垫片，安装命令如下：

　　npm install --save babel-polyfill

　　然后在脚本头部加入如下代码：

　　import 'babel-polyfill'即可

　　此博客是个人在学习ES6入门标准时一个理解和记录，如有错误，还望大家评论区指正，谢谢。

ES6标准简介之Babel转码器解说

猜你喜欢