ES6笔记(1) -- 环境配置支持
系列文章 -- ES6笔记系列
虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看ES6新特性支持度
Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度更好一些,可原生使用,但实际上更多的做法是用其他工具将ES6转码成支持度更好的ES5
这些工具有babel转码器、traceur转码器 等,用得最多的应该是babel
一、Babel环境的配置
Babel用于将ES6语法转换成ES5语法,例如
/* ES6 */
var arr = [1, 2, 3]; arr.filter((item) => {
return item % 2;
}); /* ES5 */
var arr = [1, 2, 3]; arr.filter(function (item) {
return item % 2;
});
1. Node.js环境
Node.js环境下可使用 babel-cli 命令行工具进行转换,首先安装这个工具 npm i -g babel-cli
要进行转码,得先配置babel转码的方式,根目录下添加一个配置文件 .babelrc
Win7下直接添加会报错,这里可以用命令行的方式改名
文件中指明要转换的方式
{
"presets": [
"es2015"
]
}
其中,presets表示一些将要使用到的插件集合,更多用法
用到的es2015插件还得先安装好
试着转码一下
可以将结果指定输出到某个文件
还可以指定目录
可以像Node那样直接在命令行编写代码
查看 更多命令参数
2. 浏览器环境
在浏览器环境下也可以进行ES6的转码,不过网页端实时的转换或多或少会影响性能,所以最好时网页直接使用转换好的代码
可直接引入standalone提供的 转码脚本文件
<script src="babel.min.js"></script>
<script type="text/babel">
var arr = [1, 2, 3]; arr.filter((item) => {
return item % 2;
}); console.log(arr);
</script>
二、使用浏览器的原生支持
使用阮爷的es-checker检测各特性的支持度
可见在Chrome最新版下支持度还是挺好的,所以我们可以直接在Chrome下练习基本的ES6语法
三、使用Node.js的原生支持
同样使用es-checker模块来检测支持度
所以也可以在Node环境下练手支持的新特性
ES6笔记(1) -- 环境配置支持的更多相关文章
- Qt5学习笔记(1)-环境配置(win+64bit+VS2013)
Qt5学习笔记(1)-环境配置 工欲善其事必先-不装-所以装软件 久不露面,赶紧打下酱油. 下载 地址:http://download.qt.io/ 这个小网页就可以下载到跟Qt有关的几乎所有大部分东 ...
- scrapy爬虫笔记(一)------环境配置
前言: 本系列文章是对爬虫的简单介绍,以及教你如何用简单的方法爬取网站上的内容. 需要阅读者对html语言及python语言有基本的了解. (本系列文章也是我在学习爬虫过程中的学习笔记,随着学习的深入 ...
- Android自学笔记:环境配置
Info: 自学Android之旅第二篇,初步学习会有疏漏,以后我会不断修改补全,直到完美. 2014-10-09:初版 2014-11-12: 重新配置了一台电脑,更新在学习robotium过程中, ...
- ES6学习之环境配置
环境配置 一.建立工程目录 新建dist文件夹(用于存放转化的es5文件).新建src文件夹(用于存放es6文件),在该文件夹下建立index.js文件 二.编写index.html 在根目录下新建i ...
- 【lua学习笔记】——环境配置
1 开发平台 windows7 64位 2 下载链接 http://www.lua.org/download.html 3 安装完成-环境配置 4 运行 WIN+R 运行 cmd 运行lua,显示配 ...
- 学习笔记-ionic3 环境配置搭建到打包
折腾了两周总算理清楚了,参考的链接如下: https://blog.csdn.net/zeternityyt/article/details/79655150 环境配置 https://segmen ...
- django复习笔记1:环境配置
一.IDE 推荐使用sublime安装djaneiro插件. 1.安装方式 package control中搜索djaneiro 支持补全请参考:Django support for Sublime ...
- OpenGL 学习笔记 01 环境配置
以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial 本项目Github网址 OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...
- Maven 学习笔记——Maven环境配置(1)
在学习Selenium的过程中,接触到了Maven(项目管理工具),不至于学一路忘一路,左耳朵进右耳多出,还是决定边学边记录,毕竟听的不如 看的,看的不如写的吗.首先学一样东西,肯定得明确学的是什么, ...
随机推荐
- ORACLE索引失效原因归纳[转]
1.隐式转换导致索引失效.这一点应当引起重视.也是开发中经常会犯的错误. 由于表的字段tu_mdn定义为varchar2(20),但在查询时把该字段作为number类型以where条件传给Orac ...
- Backbone源码解析(四):View(视图)模块
View视图故名思义,它控制的是界面.我们可以把一个大的网页分成很多部分的视图,按照backbone的架构,每一个视图对应都是一个对象,我们可以通过元素的钩子(id或者class或者其他选择器)把它们 ...
- Android和Linux应用综合对比分析
原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...
- 作业三:PSP记录个人项目耗时情况
PSP2.1 Personal Software Process Stages Time Planning 计划 20min Estimate 估计开发 ...
- Entity Framework 5.0系列之Code First数据库迁移
我们知道无论是"Database First"还是"Model First"当模型发生改变了都可以通过Visual Studio设计视图进行更新,那么对于Cod ...
- Java基础,输入输出
package hanqi.test; import java.io.File; import java.io.IOException; public class Test02 { public st ...
- vm中centos7配置静态ip访问外网
我使用的是桥接方式,具体步骤如下 1.设置虚拟机网络: 编辑>虚拟网络编辑器 2.设置vm中操作系统的网络设置 3.进入centos7中后修改网络配置: 另附我的宿主机网络配 ...
- 基于Rest服务实现的RPC
前言:现在RPC成熟的框架已经很多了,比喻Motan和Dubbo,但是今天我这里提供一种基于Rest服务的Rpc.和上一篇连着的http://www.cnblogs.com/LipeiNet/p/58 ...
- 解析大型.NET ERP系统 企业信息化实施人员工具箱
1 第一次实施会议 当签订合同之后,软件公司与客户约定好会议时间,双方召开第一次实施会议,确定实施的小组人员名单,项目实施周期,培训计划表,实施主计划,系统预备主文件数据准备,软件公司技术支持联系方式 ...
- struts2简单数据验证
当表单数据提交到后台后通常要对数据进行校验,以登录为例,后台拿到用户名密码后会判断是否正确,正确的话会跳转到网站用户登录成功的页面,如果不正确的话会提示用户输入不正确. 首先在struts.xml配置 ...