文档章节

借助Babel 6平台使用ES6新特性

Mr小Z
 Mr小Z
发布于 2015/11/30 18:38
字数 630
阅读 204
收藏 4
点赞 0
评论 1

ES6新特性

关于ES6新特性我就不废话太多了,这里仅简单罗列一下:

  1. 箭头函数

  2. 增强的Object字面量 

  3. 模板字符串

  4. 解构

  5. 参数默认值,不定参数,拓展参数

  6. let与const 关键字

  7. for of 值遍历

  8. 模块

  9. Map和Set类型

  10. Proxies

  11. Symbols

  12. Math,Number,String,Object 的新API

  13. Promises异步对象

参考1:http://www.cnblogs.com/Wayou/p/es6_new_features.html

参考2:http://babeljs.io/docs/learn-es2015/

Babel 6

由于目前主要浏览器不能够完全支持ES6,因此通常借助一些工具将ES6语法翻译成ES5,Babel即是这样一款工具。

最新的Babel 6与Babel 5及更早的版本有很大的差别,Babel变成了一个平台,而其他各种工具则以插件的形式安装。

通过控制台全局安装babel:

npm install -g babel-cli


此时,全局安装的模块默认位于“C:\Users\zhl\AppData\Roaming\npm\node_modules”(Windows系统),为了正常使用Babel,一定要添加环境变量“NODE_PATH”,并指向上述路径。

为了使用Babel的翻译功能,安装ES6翻译插件(仍然全局安装):

npm install -g babel-preset-es2015


此时,在任意工作目录,建立src和lib两个文件夹,并且在src文件夹中建立.babelrc文本文件,写入如下内容启用ES6翻译预设配置

{
  "presets": ["es2015"]
}

此时,在命令行中,CD到当前工作目录,运行如下命令:

babel src --watch --out-dir lib

此时,在src文件夹中,建立的任何扩展名为js(或者es6)的文件均会被翻译成ES5语法,并将输出的文件保存到lib文件夹下,由于启用了--watch参数,任何修改均会被立即翻译。

再补充如下几个常用命令:

  1. 翻译指定文件:babel script.js --out-file script-compiled.js

  2. 当文件改动时自动翻译:babel script.js --watch --out-file script-compiled.js

  3. 翻译文件夹下所有JS:babel src --out-dir lib

  4. 包含map文件:babel script.js --out-file script-compiled.js --source-maps

使用Polyfill

Polyfill是一个插件,用于提供那些开发者们希望浏览器原生提供支持的功能。Babel翻译后的JS部分仍需要基于Polyfill才能正常运行,因此,如果是在浏览器环境中,应在所有脚本之前引入polyfill.js。

使用如下命令全局安装polyfill插件:

npm install -g babel-polyfill

安装完毕后应该可以在C:\Users\zhl\AppData\Roaming\npm\node_modules\babel-polyfill\dist中找到polyfill.min.js文件。



© 著作权归作者所有

共有 人打赏支持
Mr小Z

Mr小Z

粉丝 7
博文 15
码字总数 10342
作品 0
武汉
高级程序员
加载中

评论(1)

Mr小Z
Mr小Z
⎝⎞⎟⎟⎠
KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架

koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可稳定运行在 No...

霁夜茶135 ⋅ 2016/10/29 ⋅ 0

KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架

介绍 KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可稳定运行在 Node.j...

einsqing ⋅ 2016/09/18 ⋅ 0

KoaHub.js 2.0.0 发布,Node.js web快速开发框架

KoaHub.js 2.0.0 发布了。主要更新如下: 【升级】升级koa2和依赖 【优化】内置body,session,cors,static中间件 【新增】新增this.validate,数据验证。 【新增】koahub.js入门视频教程,...

einsqing ⋅ 2017/03/01 ⋅ 4

KoaHub.js可借助 Babel 编译稳定运行在 Node.js 环境上

koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可稳定运行在 No...

NUANUAA ⋅ 2016/10/05 ⋅ 0

koahubjs 1.0.6 发布,基于 Koa.js 的快速开发框架

koahubjs 发布 1.0.6 发布了。KoaHub.js 是基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译...

einsqing ⋅ 2017/01/17 ⋅ 4

Node.js web快速入门 -- KoaHub.js

介绍 KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可稳定运行在 Node.j...

NUANUAA ⋅ 2016/09/19 ⋅ 2

KoaHub.js 1.1.0 发布,基于 Koa.js 的快速开发框架

KoaHub.js 1.1.0 发布了。KoaHub.js 是基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可...

einsqing ⋅ 2017/02/06 ⋅ 6

张成文——ECMAScript 6 开发体系实践

2016年04月23日14:00時,在武汉市东湖高新技术开发区民院路38号纽宾凯鲁广国际酒店(光谷步行街地铁C出口省测绘局斜对面),舉行的规模在800人左右的2016源创会武汉站。由张成文(腾讯SNG web)分...

yunwangjun ⋅ 2016/04/24 ⋅ 1

KoaHub.js 1.2.2 发布,基于 Koa.js 的快速开发框架

KoaHub.js 1.2.2 更新。KoaHub.js 是基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可稳...

einsqing ⋅ 2017/02/20 ⋅ 3

中文最佳实践Node.js Web快速开发框架--KoaHub.js

介绍 KoaHub.js -- 中文最佳实践Node.js Web快速开发框架。支持Koa.js, Express.js中间件,可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译...

einsqing ⋅ 2016/09/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

金山WPS发布了Linux WPS Office

导读 近日,金山WPS发布了Linux WPS Office中文社区版新版本,支持大部分主流Linux系统,功能更加完善,兼容性、稳定性大幅度提升。本次更新WPS将首次在Linux提供专业办公文件云存储服务,实...

问题终结者 ⋅ 昨天 ⋅ 0

springboot2输出metrics到influxdb

序 本文主要研究一下如何将springboot2的metrics输出到influxdb maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

go4it ⋅ 昨天 ⋅ 0

微信小程序 - 选择图片显示操作菜单

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。 但是你从...

hello_hp ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部