ECMAScript6环境搭建

作者: 香榭的落叶wZw | 来源:发表于2017-09-03 13:57 被阅读0次

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

    相关文章

      网友评论

        本文标题:ECMAScript6环境搭建

        本文链接:https://www.haomeiwen.com/subject/mvvdjxtx.html