ECMAScript 6(ES6)的发展或者说普及之快可以说是难以想象的,对很多人来说ECMAScript 5(ES5)都还普及呢。现代浏览器对ES6新特新或多或少的有些支持,但支持度不高,所以要想在浏览器中直接使用ES6的新特性,还得等上一段时间。

ES6的普及起到至关重要的就不得不说babel了。babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

对于刚开始使用babel的人,可能会碰到一些问题,因为网上对于babel的使用教程基本上是针对babel 6之前的版本,而babel 6对于之前版本有一些变化。

  • 因为之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。所以babel 6拆分成两个包:babel-clibabel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli,如果想要在node中使用就下载babel-core

  • babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。如果你想使用箭头函数,那就得安装箭头函数插件npm install babel-plugin-transform-es2015-arrow-functions

下面来实践下(命令行使用babel)。

安装babel:

npm install -g babel

命令行转化js文件:

babel es6.js

提示:

The CLI has been moved into the package `babel-cli`.
npm install -g babel-cli

安装babel-cli

npm install -g babel-cli

再次转化:

babel es6.js

命令行输出:

[1, 2, 3].map(x => x * x)

可以看到并没有像期望的那样转化为ES5,因为没有安装插件。上面使用了箭头函数,所以要安装箭头函数插件。但是这样太麻烦,如果使用了ES6的其他特性,还要安装其他插件,可以只下载一个插件:

npm install babel-preset-es2015

这个插件包含了其他插件。

安装完插件后,运行:

babel es6.js --presets es2015

输出:

[1, 2, 3].map(function (x) {
return x * x;
})

上面已经得到想要的结果了。

babel可以将ES6文件转换输出到另一个文件:

babel es6.js -o es5.js
# 或者
babel es6.js --out-file es5.js

也可以用于转换整个目录:

babel -d lib/ src/

运行babel-node命令可以直接在命令行运行ES6代码:

babel-node

> console.log([1,2,3].map(x => x * x))
[ 1, 4, 9 ]

也可以直接运行ES6文件。

babel es6.js

> [1, 2, 3].map(function (x) {
return x * x;
})

(完)

babel无法编译?的更多相关文章

  1. babel使用入门以及使用webpack+babel来"编译"你的JS代码

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...

  2. Hbuilder中添加Babel自动编译

    Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过B ...

  3. 利用babel自动编译es6文件

    一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...

  4. 理解Babel是如何编译JS代码的及理解抽象语法树(AST)

    Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是?   很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器都 ...

  5. 从AST编译解析谈到写babel插件

    之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...

  6. browserify babel gulp 没有编译import的文件

    1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel ...

  7. babel 编译后 this 变成了 undefined

    最近有在用webpack,使用了babel这个模块来编译js jsx文件,但是发现文件编译后this变成了undefined. 源文件 module.exports = React.createCla ...

  8. 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(一)

    大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具.大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码: { "presets" ...

  9. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

随机推荐

  1. 关于C#的静态类和静态构造函数

    静态构造函数是C#的一个新特性,其实好像很少用到.不过当我们想初始化一些静态变量的时候就需要用到它了.这个构造函数是属于类的,而不是属于哪里实例的,就是说这个构造函数只会被执行一次.也就是在创建第一个 ...

  2. 【PHP函数】json_decode() ---- 对 JSON 格式的字符串进行解码

    json_decode() --- 对 JSON 格式的字符串进行解码 1.用法: mixed json_decode ( string $json [, bool $assoc = false [, ...

  3. route(windows)

    1.route delete 0.0.0.0 mask 0.0.0.0 10.33.31.254----------删除默认到内网网关的默认路由:2.route add -p 10.33.0.0 ma ...

  4. 使用RT3070使开发板上网

    原文地址:http://www.cnblogs.com/NickQ/p/8973880.html 使开发板上网 USB驱动部分 在arch/arm/mach-s3c2440/mach-smdk2440 ...

  5. 求Read Depth

    如何划窗统计测序数据的reads数(depth):https://blog.csdn.net/shenshenwu666/article/details/80936374 方法1,用samtools ...

  6. 2017-2018-1 20155234 实验三 实时系统及mypwd实现

    2017-2018-1 20155234实验三实时系统及mypwd实现 实验三-并发程序-1 学习使用Linux命令wc(1) 基于Linux Socket程序设计实现wc(1)服务器(端口号是你学号 ...

  7. 20155238 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    实验内容 使用JDK编译.运行简单的Java程序. 使用Eclipse 编辑.编译.运行.调试Java程序. 实现学生成绩管理功能,并进行测试. 实验步骤及结果 (一)命令行下Java程序开发 编译运 ...

  8. 查看git提交细节

    git log git show fdf39277f54dd0484a9fefc012463924544e07af

  9. AGC 018 F - Two Trees

    F - Two Trees 链接 题意: 给定两棵都是N个节点的有根树,节点均从1~N标号.给每个标号定一个权值(类似一号点的权值是x,那么两棵树中1号点的权值都是x),使在两棵树满足以任意节点为根的 ...

  10. Linux常用系统命令大全

    最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大.我将我了解到的命令列举一 ...