ES6的连带消息

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

图片 1

于不同之条件遭到使 ES6
每当 NodeJs 环境被运作 ES6

图片 2

当 Chrome 56(64bit)浏览器被运作 ES6

图片 3

于 IE9 浏览器中运作 ES6

 图片 4

ES6 到 ES5 的转换

使用 Babel 完成 ES6 到 ES5 的转换

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

图片 5

使用 webstorm 编写 ES6 代码

图片 6

WebStorm 配置支持 ES6 语法规则

图片 7

babel 全局安装

npm install -g babel-cli

图片 8

设置转换插件(此插件定义了 ES2015 转码规则,相当给是字典的功夫
能):

npm install babel-preset-es2015 –save-dev

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

图片 9

自动转换

babel es6.js -w –out-file es5.js –presets es2015
长连编制 index.html 文件

图片 10

运行结果

图片 11

下 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

图片 12

于此时此刻型目录下启动 Browsersync,开始监听

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

图片 13

修改 es6.js

图片 14

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

图片 15

这边的 ES6 到 ES5 的易时以浏览器端实现的;
而又刷新 Chrome 和 IE11,现在 ES6 也可以以各种浏览器上以了。

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

图片 16

查编译后底 es5.js

图片 17

面说到了 2 两栽 es6->es5 的变换:babel 命令行方式和浏览器引入
babel-core 方式

 

再有第三种植方法,那便是 webstorm 自带的 File Watcher 功能
机动配置 File Watcher

图片 18

留意:当输入了 es6 语法规则之代码后,webstorm 会自动弹出这种唤醒。

图片 19

还修改 es6.js

图片 20

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

 

还有雷同种艺术是

图片 21

直白默认配置就行

备注

图片 22

立马里面的东西,表示的凡逐一属性代表的意义

 

当今webstrom里面凡是其一

图片 23

 

npm install  babel-preset-env
 –save-dev只要安装是就算实行,不用es2015插件

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