星空网 > 软件开发 > Java

ES6笔记(1)

 

系列文章 -- ES6笔记系列

 

虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看 ES6新特性支持度

Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度更好一些,可原生使用,但实际上更多的做法是用其他工具将ES6转码成支持度更好的ES5

这些工具有babel转码器、traceur转码器 等,用得最多的应该是babel

 

 

一、Babel环境的配置

Babel用于将ES6语法转换成ES5语法,例如

 1 /* ES6 */ 2 var arr = [1, 2, 3]; 3  4 arr.filter((item) => { 5   return item % 2; 6 }); 7  8  9 /* ES5 */10 var arr = [1, 2, 3];11 12 arr.filter(function (item) {13   return item % 2;14 });

 

1. Node.js环境

Node.js环境下可使用 babel-cli 命令行工具进行转换,首先安装这个工具 npm i -g babel-cli

ES6笔记(1)

要进行转码,得先配置babel转码的方式,根目录下添加一个配置文件 .babelrc

Win7下直接添加会报错,这里可以用命令行的方式改名

ES6笔记(1)

ES6笔记(1)

文件中指明要转换的方式

{  "presets": [    "es2015"  ]}

其中,presets表示一些将要使用到的插件集合,更多用法

用到的es2015插件还得先安装好

ES6笔记(1)

 

试着转码一下

ES6笔记(1)

可以将结果指定输出到某个文件

ES6笔记(1)

还可以指定目录

ES6笔记(1)

可以像Node那样直接在命令行编写代码

ES6笔记(1)

查看 更多命令参数

 

2. 浏览器环境

在浏览器环境下也可以进行ES6的转码,不过网页端实时的转换或多或少会影响性能,所以最好时网页直接使用转换好的代码

可直接引入standalone提供的 转码脚本文件

  <script src='/images/loading.gif' data-original="babel.min.js"></script>  <script type="text/babel">    var arr = [1, 2, 3];    arr.filter((item) => {      return item % 2;    });    console.log(arr);  </script>

ES6笔记(1)

 

二、使用浏览器的原生支持

使用阮爷的es-checker检测各特性的支持度

ES6笔记(1)

可见在Chrome最新版下支持度还是挺好的,所以我们可以直接在Chrome下练习基本的ES6语法

 

三、使用Node.js的原生支持

同样使用es-checker模块来检测支持度

ES6笔记(1)

ES6笔记(1)

ES6笔记(1)

所以也可以在Node环境下练手支持的新特性

 




原标题:ES6笔记(1)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流