要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了;

  安装es-checker

  在使用Babel之前 , 我们要先检测一下当前node对es6的支持情况, 我们使用先es-checker, 命令行下执行:

npm -g install es-checker

  es-checker安装完毕以后, 命令行执行:es-checker , 如下图, 我的node环境版本是v4.4.3, 支持64%哦 :

  babel的安装

  所以我们来安装babel吧, 有了babel, 能够使用更多高级词法!

  首先新建一个工作目录, 然后创建一个package.json的文件, 内部内容为:

{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
}
}

  然后再打开cmd(命令行), 在工作目录下执行命令安装babel-cli:

npm  --save-dev install babel-cli

  再安装一个全局的babel-cli:

npm -g  install babel-cli

  接着在工作目录创建一个名字为.babelrc的文件, 文件内容入如下( 要注意window系统下创建这种文件系统会提示你:“必须键入文件名” , 你可以找别的方式去创建, 我是在开发工具的工程目录中把这个文件创建出来的):

 {
"presets": [
"es2015"
],
"plugins": []
}

  安装babel-preset-es2015

  还是工作目录, 然后再安装babel-preset-es2015

npm install --save-dev babel-preset-es2015

  到目前为止babel算是安装完毕了:

  测试es6代码

  创建一个test.js的文件, 键入内容:

let [a,b,c] = [,,];
console.log(a,b,c);

  在当前目录下执行:

babel-node test

  结果应该是这样的:

  如果直接用执行node test, 我这边会报异常: SyntaxError: Unexpected token [

  相关

    nodeJS : https://nodejs.org/en/

    babel官网 :https://babeljs.io/

    阮老师的博客:http://www.ruanyifeng.com/blog/2016/01/babel.html

作者: NONO
出处:http://www.cnblogs.com/diligenceday/

QQ:287101329

微信:18101055830

让nodeJS支持ES6的词法----babel的安装和使用的更多相关文章

  1. 让nodejs 支持 es6 import

    备注:    尽管nodejs 新版本已经支持es6 的好多特性了,但是还是有部分不支持,为了使用,实际上我们有一个 比较强大工具 bable,下面介绍几个比较简单的用法. 1. bable-cli ...

  2. sublime3支持es6语法和vue彩色显示

    支持ES6语法设置: 首先安装nodejs 当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安 ...

  3. babel的安装和使用方法

    要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了: 安装es-checker 在使用Bab ...

  4. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)

    原文请看:http://www.cnblogs.com/imwtr/p/6010550.html   用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...

  6. 在webstrorm中配置好es6 babel【更新:在webstorm中配置.vue和.vue文件中支持es6】

    第一步:全局安装babel-cli npm install -g babel-cli 第二步,新建一个空项目,在 WebStorm 中的当前项目中打开 Terminal,进入项目的根目录下, 安装 E ...

  7. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

  8. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  9. IE 浏览器不支持 ES6 Array.from(new Set( )) SCRIPT438: 对象不支持“from”属性

    [转]解决老浏览器不支持ES6的方法 现象: Array.from(new Set( )) SCRIPT438: 对象不支持“from”属性或方法   解决方法: 安装babel 引入browser. ...

随机推荐

  1. UIGrid/UITable 性能优化

    性能优化 排行榜,邮件,关卡等数据列表项,一般在玩家打开面板时,都会重新刷新一次数据,那是否有必要每次都生成列表项呢? 假如每次列表的内容有变动就Instance 新的Gameobject,这是没有必 ...

  2. PHP加载另一个文件类的方法

    加载另一个文件类的方法 当前文件下有a.php 和b.php,想要在class b中引入class a <?php    class a    {        public $name = ' ...

  3. 在C++中实现字符串分割--split

    字符串分割 在一些比较流行的语言中,字符串分割是一个比较重要的方法,不论是在python,java这样的系统级语言还是js这样的前端脚本都会在用到字符串的分割,然而在c++中却没有这样的方法用来调用. ...

  4. Oracle日期格式转换

    本文主要介绍Oracle中的日期转换. 1. 日期转化为字符串 (以2016年10月20日为例) select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss')  st ...

  5. Linux收集

    1.rsync快速删除文件 rsync --delete -avH /empty /rmdir 选项说明: –delete-before 接收者在传输之前进行删除操作 –progress 在传输时显示 ...

  6. 前端见微知著JavaScript基础篇:this or that ?

    上节,我们提到了this关键字的问题,并且追加了一句很有意义的话:谁调用我,我指向谁.的确,在javascript中,在默认情况下,this会指向一个已经初始化的window对象.所以你不论有多少全局 ...

  7. caffe的python接口学习(2):生成solver文件

    caffe在训练的时候,需要一些参数设置,我们一般将这些参数设置在一个叫solver.prototxt的文件里面,如下: base_lr: 0.001 display: 782 gamma: 0.1 ...

  8. 数据字典生成工具之旅(3):PowerDesign文件组成结构介绍及操作

    从这篇开始将正式讲解整个重要部分的实现细节,本篇讲解Pdm文件的解析.其实PDM文件就是XML文件,可以用Editplus或者VS打开查看.了解到这一点之后大家就能猜到,可以用解析XML的方式读取PD ...

  9. 高性能JavaScript 达夫设备

    前言 在<高性能JavaScript>一书的第四章算法和流程控制中,提到了减少迭代次数加速程序的策略—达夫设备(Duff's device).达夫设备本身很好理解,但是其效果是否真的像书中 ...

  10. 动手开发自己的第一个 composer 包

    原文:http://blog.jayxhj.com/2016/05/basic-composer-package-development/ composer 是 PHP 的依赖管理工具,本篇文章就来说 ...