ECMAScript 是什么?

ECMAScript 是 Javascript 语言的标准。
ECMA European Computer Manufactures Association(欧洲计算机制造商协会),主要任务
是研究信息和通讯技术方面的标准并发布有关技术报告。
ECMAScript6:简称 ES6,是 JavaScript 语言的下一代标准,也是目前正是发布的最新
JavaScript 标准,由于 ES6 是在 2015 年发布,所以 ES6 也成为 ECMAScript2015。

运行 ECMAScript6 的途径

浏览器(IE、Firefox、Chrome、Safari、Opera 等)
浏览器对 ES6 的支持情况 http://kangax.github.io/compat-table/es6/

使用 Javascript 引擎的系统(如 Node.js)

Node.js 是一个 Javascript 运行环境(runtime)。实际上它是对 Google V8 引擎进行了封装。
V8 引擎执行 Javascript 的速度非常快,性能非常好。Google Chrome 浏览器就是用的 V8 引
擎。
Node.js 下载地址 https://nodejs.org/zh-cn/,目前支持到 97%。

使用 Babel 工具将 ECMAScript6 转换为 ECMAScript5
Babel 是 ES2015 语法转化器。这些转化器能让你现在就使用最新的 JavaScript 语法,而不
用等待浏览器提供支持。

NodeJs 安装步骤

nvm(NodeJs 版本管理工具)安装

Windows 操作系统的 nvm 下载地址 https://github.com/coreybutler/nvm-windows/releases

在cmd输入nvm -h查看是否成功

输入nvm root,找到安装的路径

nvm 配置淘宝镜像(下载更快)

修改 D:\dev\nvm\settings.txt  通过上一步找到
root: D:\dev\nvm 
path: D:\dev\nodejs
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

通过 nvm 安装某版本的 nodejs 集(node、npm(nodejs 包管理工具))
64 位系统:CMD 运行 nvm install 6.9.2
32 位系统:CMD 运行 nvm install 6.9.2 32
注意:其中 6.9.2 表示安装 node 版本为 6.9.2,这里 npm 是包含在 node 中的不需要单独安

安装node.js后,使用nvm list,查看node.js版本

使用nvm use 版本号,切换使用的node

npm 设置淘宝镜像(下载更快)

npm config set registry https://registry.npm.taobao.org

在不同的环境中使用 ES6
在 NodeJs 环境中运行 ES6

在 Chrome 56(64bit)浏览器中运行 ES6

在 IE9 浏览器中运行 ES6

ES6 到 ES5 的转换

使用 Babel 完成 ES6 到 ES5 的转换

使用 npm 创建一个 NodeJs 工程,步骤如图:

使用 webstorm 编写 ES6 代码

WebStorm 配置支持 ES6 语法规则

babel 全局安装

npm install -g babel-cli

安装转换插件(此插件定义了 ES2015 转码规则,相当于是字典的功
能):

npm install babel-preset-es2015 --save-dev

CMD 命令行转换 ES6 到 ES5
babel es6.js --out-file es5.js --presets es2015

自动转换

babel es6.js -w --out-file es5.js --presets es2015
添加并编写 index.html 文件

运行结果

使用 Browsersync 实时刷新页面和 Babel-Core 实时转换ES6

Browsersync 能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less 等)并自
动刷新页面。

安装 Browsersync

npm install -g browser-sync

安装 babel-core(在网页上实时转换 ES6 到 ES5)

npm install babel-core@5 --save

HTML 页面引入 babel-core 实时转换 js 代码

/node_modules/babel-core/browser.min.js
/node_modules/babel-core/browser-polyfill.min.js

在当前项目目录下启动 Browsersync,开始监听

browser-sync start --server --files "**"

修改 es6.js

页面自动刷新,结果如下:

这里的 ES6 到 ES5 的转换时在浏览器端实现的;
可同时刷新 Chrome 和 IE11,现在 ES6 也可以在各种浏览器上使用了。

回到命令行的方式再来看看:
CMD 运行 babel es6.js --out-file es5.js --presets es2015

查看编译后的 es5.js

上面讲到了 2 两种 es6->es5 的转换:babel 命令行方式和浏览器引入 babel-core 方式

还有第三种方式,那就是 webstorm 自带的 File Watcher 功能
自动配置 File Watcher

注意:当输入了 es6 语法规则的代码后,webstorm 会自动弹出这种提示。

再次修改 es6.js

保存 es6.js 通过 webstorm 的 File Watcher 功能会自动生成转换后的 es6.js 和 es6.js.map

还有一种方法是

直接默认配置就行

备注

这里面的东西,表示的是各个属性代表的含义

现在webstrom里面是这个

npm install  babel-preset-env  --save-dev只要安装这个就行,不用es2015插件

地址:http://www.jianshu.com/p/41d3f7768095

ES6的相关信息的更多相关文章

  1. ManagementClass类解析和C#如何获取硬件的相关信息

    在.NET的项目中,有时候需要获取计算机的硬件的相关信息,在C#语言中需要利用ManagementClass这个类来进行相关操作. 现在先来介绍一下ManagementClass类,首先看一下类的继承 ...

  2. MySQL查看数据库相关信息

    使用MySQL时,需要了解当前数据库的情况,例如当前的数据库大小.字符集.用户等等.下面总结了一些查看数据库相关信息的命令   1:查看显示所有数据库 mysql> show databases ...

  3. php http头设置相关信息

    HTTP 状态码 状态码用来告诉HTTP客户端,HTTP服务器是否产生了预期的Response. HTTP/1.1中定义了5类状态码, 状态码由三位数字组成,第一个数字定义了响应的类别 1XX 提示信 ...

  4. 在linux中查询硬件相关信息

    1.查询cpu的相关 a.查询CPU的统计信息 使用命令:lscpu 得到的结果如下: Architecture: x86_64 CPU op-mode(s): -bit, -bit Byte Ord ...

  5. Android根据文件路径使用File类获取文件相关信息

    Android通过文件路径如何得到文件相关信息,如 文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等: 如图: 代码: public class MainActivity extends ...

  6. Linux sysinfo获取系统相关信息

    Linux中,可以用sysinfo来获取系统相关信息. #include <stdio.h> #include <stdlib.h> #include <errno.h& ...

  7. C# 获取进程或线程的相关信息

    信息来自: http://blog.163.com/kunkun0921@126/blog/static/169204332201293023432113/ using System; using S ...

  8. 获取Java系统相关信息

    package com.test; import java.util.Properties; import java.util.Map.Entry; import org.junit.Test; pu ...

  9. 把数据保存到数据库附加表 `dede_addonarticle` 时出错,请把相关信息提交给DedeCms官方。Duplicate entry

    把数据保存到数据库附加表 `dede_addonarticle` 时出错,请把相关信息提交给DedeCms官方.Duplicate entry ’3′ for key ‘PRIMARY’ 你的主键是不 ...

随机推荐

  1. 斯坦福大学公开课机器学习:梯度下降运算的学习率a(gradient descent in practice 2:learning rate alpha)

    本章节主要讲怎么确定梯度下降的工作是正确的,第二是怎么选择学习率α,如下图所示: 上图显示的是梯度下降算法迭代过程中的代价函数j(θ)的值,横轴是迭代步数,纵轴是j(θ)的值 如果梯度算法正常工作,那 ...

  2. java.lang.OutOfMemoryError及解决方案

    主要有3种比较常见的OutOfMemory Error: java.lang.OutOfMemoryError: Java heap space java.lang.OutOfMemoryError: ...

  3. 地址空间格局随机化ASLR

    Address space layout randomization(ASLR)是一种参与保护缓冲区溢出问题的一个计算机安全技术.是为了防止攻击者在内存中能够可靠地对跳转到特定利用函数.ASLR包括随 ...

  4. 使用ROP攻击绕过Windows的DEP

    使用ROP攻击绕过Windows的DEP 基础知识 DEP DEP(Data Execution Prevention)意为数据执行保护,是Windows的一项安全机制,主要能够在内存上执行额外检查以 ...

  5. shell脚本中判断上一个命令是否执行成功

    shell脚本中判断上一个命令是否执行成功 shell中使用符号“$?”来显示上一条命令执行的返回值,如果为0则代表执行成功,其他表示失败.结合if-else语句实现判断上一个命令是否执行成功. 示例 ...

  6. 运用Zabbix实现内网服务器状态及局域网状况监控(4) —— Zabbix客户端安装

    1.  创建用户 [root@zabbix ~]# groupadd zabbix [root@zabbix ~]# useradd -g zabbix zabbix 2. 安装zabbix_3.2 ...

  7. ThinkPHP 3.2公共类库、应用类库ThinkPHP/Library讲解

    一.ThinkPHP的类库主要包括公共类库和应用类库,都是基于命名空间进行定义和扩展的.只要按照规范定义,都可以实现自动加载.        公共类库 公共类库通常是指ThinkPHP/Library ...

  8. 关于javaBean,pojo,EJB

    JavaBean是公共Java类 1.所有属性为private.2.提供默认无参构造方法.3.类属性通过getter和setter操作.4.实现serializable接口.

  9. python -- 异步IO 协程

    python 3.4 >>> import asyncio >>> from datetime import datetime >>> @asyn ...

  10. Nginx URL匹配

      Nginx 下 location模块  可以实现对网页URL进行分析处理 location ~ .*\.(gif|jpg|jpeg|png|bmg|swf)$ { // 扩展名为gif|jpg|j ...