ECMAScript6环境搭建

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

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

运行 ECMAScript6 的途径

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

可以看出来,基本上是没有浏览器完全支持的,所以还是不要直接用的好。
但是有转换器 (更准确地说是源代码到源代码的编译器) 可以把ES6转换为被浏览器接受的ES5,比如Babel以及Traceur 之类的项目。其中Babel对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的在线交互式编程环境,因此用的比较多。
Babel 是 ES2015 语法转化器。这些转化器能让你现在就使用最新的 JavaScript 语法,而不用等待浏览器提供支持。
接下来我们就要使用 Babel 工具将 ECMAScript6 转换为 ECMAScript5啦。

NodeJs 安装步骤

我们要使用nvm来安装node,nvm是一种NodeJs版本管理工具。

(这里需要说明一下:nvm是NodeJs版本管理工具,下文中的npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,类似于JAVA中的Maven)

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

目录.png

安装之后,我们打开cmd 运行 set | findstr "nvm"检查一下

检查结果.png

可以看到nvm已经存在F盘的dev文件夹中
接下来我们运行nvm -h
安装成功.png

出现上图所示表示nvm安装成功。

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

修改 F:\dev\nvm\settings.txt

修改为.png

我们通过 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 中的不需要单独安装。
安装目前最新版本 8.4.0 如图所示 :
8.4.0.png

我们可以检查一下node 和 npm的版本
查询版本.png

可以看到我们现在使用的node版本是 v6.9.2 包管理工具npm的版本是3.10.9。
我们接下来使用nvm来切换到刚才下载的新版本 8.4.0 运行nvm use 8.4.0
切换新版本.png

好了我们运行node -v显示版本为v8.4.0说明切换成功了。

接下来为了使npm更高效,下载更快,我们可以设置淘宝镜像。

配置淘宝镜像.png

配置好之后我们就可以在不同环境下运行ES6了~

在NodeJs环境中运行ES6

打印name.png

OK接下来我们就要实现ES6到ES5的转换了!

使用 Babel 完成 ES6 到 ES5 的转换

首先使用 npm 创建一个 NodeJs 工程:


开始.png

交互式配置node参数:

配置参数.png

创建好之后,我们通过webstorm打开workspace这个项目,使用ES6编写代码:

let 报错.png

我们需要更改webstorm的设置让他支持ES6语法:

更改设置.png

这样就不会报错了。

babel全局安装

运行npm install -g babel-cli

安装babel.png

安装成功.png

然后安装转换插件(此插件定义了 ES2015 转码规则,相当于是字典的功
能): npm install babel-preset-es2015 –save

安装插件.png

文件目录.png

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

可以看到es6.js中的 let 和 箭头函数 转换为了es5.js中浏览器可以识别的es5代码

es6.js中的代码.png

转换为

es5.js中的代码.png

这些就是babel自动帮我们做的。

当然我们可以设置自动转换,也就是每写一行代码会自动转换过去,不过这样会很耗性能。
babel es6.js -w --out-file es5.js --presets es2015

可以看到我们只要更改了es6.js里面的内容就会记录操作:


cmd记录.png

同样当我们代码错误,也会报错:


cmd报错.png

小结

配置环境遇到了很多坑,node更新太快了导致很多包有兼容性问题,如果nodev8.4.0,使用过程中出现error -4048 请使用低版本 推荐 v6.9.2 版本 。
下次我会尝试使用 Browsersync 实时刷新页面和 Babel-Core 实时转换
ES6 ,谢谢大家。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容