ECMAScriptES6的有关音讯

ECMAScript 是什么?

ECMAScript 是 Javascript 语言的规范。
ECMA European Computer 马努factures
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 是 ES二〇一四 语法转化器。这个转化器能让您以往就应用新型的 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

ECMAScript 1

在分化的条件中选用 ES6
在 NodeJs 环境中运营 ES6

ECMAScript 2

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

ECMAScript 3

在 IE9 浏览器中运作 ES6

 ECMAScript 4

ES6 到 ES5 的转换

使用 Babel 完成 ES6 到 ES5 的转换

接纳 npm 创设三个 NodeJs 工程,步骤如图:

ECMAScript 5

使用 webstorm 编写 ES6 代码

ECMAScript 6

WebStorm 配置协助 ES6 语法规则

ECMAScript 7

babel 全局安装

npm install -g babel-cli

ECMAScript 8

设置转换插件(此插件定义了 ES二〇一四 转码规则,也便是是字典的功
能):

npm install babel-preset-es2015 –save-dev

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

ECMAScript 9

自行转换

babel es6.js -w –out-file es5.js –presets es2015
加上并编辑 index.html 文件

ECMAScript 10

运作结果

ECMAScript 11

动用 Browsersync 实时刷新页面和 贝布el-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

ECMAScript 12

在时下项目目录下运营 Browsersync,伊始监听

browser-sync start –server –files “**”

ECMAScript 13

修改 es6.js

ECMAScript 14

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

ECMAScript 15

此间的 ES6 到 ES5 的变换时在浏览器端达成的;
可同时刷新 Chrome 和 IE11,以往 ES6 也足以在各类浏览器上利用了。

回来命令行的措施再来看看:
CMD 运行 babel es6.js –out-file es5.js –presets es2015

ECMAScript 16

翻看编写翻译后的 es5.js

ECMAScript 17

下面讲到了 2 二种 es6->es5 的更换:babel 命令行格局和浏览器引入
babel-core 格局

 

再有第二种方式,那正是 webstorm 自带的 File 沃特cher 作用
自动配置 File 沃特cher

ECMAScript 18

瞩目:当输入了 es6 语法规则的代码后,webstorm 会自动弹出那种唤醒。

ECMAScript 19

再度修改 es6.js

ECMAScript 20

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

 

再有一种方法是

ECMAScript 21

一贯暗中同意配置就行

备注

ECMAScript 22

那在那之中的事物,表示的是各种属性代表的意思

 

方今webstrom里面是其一

ECMAScript 23

 

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

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