技术干货JavaScript 进阶营让前端飞

ECMAScript6环境搭建

2017-09-03  本文已影响0人  香榭的落叶wZw

使用 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 ,谢谢大家。

上一篇下一篇

猜你喜欢

热点阅读