什么是Babel

相信很多新手没有听说过Babel和ES6,如果你是老手的话,那么请自动忽略~

ES6
也就是ECMAScript 6,也就是最新的一代js规范,添加了很多语言的特性,包括模块管理,类,块级作用域等等内容。我最喜欢的就是箭头函数,优雅~

Babel
然而虽然ES6
很棒,但是现在几乎没有浏览器或者Node(我记得5.0已经全部支持了es6,可是为啥我试着却不行。。。似乎要开启全部的harmony)能够完全支持es6的代码,那么问题来了,如果我想体验一下es6的代码,怎么办??
一个很简单的思路便是:
我写个程序,将es6代码转换成es5代码进行运行不就好了,很棒。而Babel就是干的这个事情。

babel5 和 babel6 的区别
对于Babel来说,现在有了两个版本,一个是5,一个是6,那么两者有什么区别呢?
5对新手更加友好,因为只需要安装一个babel就可以了,而6需要安装比较多的东西和插件才可以。相比5来说,6将命令行工具和API分开来了,最直观的感觉就是,当你想在代码中运行es6代码的话,需要安装babel-core,而如果你想在终端编译es6或者是运行es6版本的REPL的话,需要安装babel-cli

也许有人问,原先的babel去哪了?是这样的,这个babel的package到了6版本之后虽然还是能安装,但是已经不具有任何的有效的代码了。取而代之的是一段提示文字,提示你需要安装babel-core或者babel-cli。所以你在babel6的情况下,完全不需要安装,babel6将babel插件化,当你第一次安装babel-core并且按照以前的方式来加载require hook的话,你回发现代码无法运行:require('babel-core/register');

就是因为babel6整体插件化了,如果你想使用es6语法,需要手动加载相关插件。
这里有一篇文章,建议看一下《The Six Things You Need To Know About Babel 6》
Quick Start
建立空文件夹 babel6
建立空文件夹babel6作为本次的目录,并npm init

安装Babel6
npm install babel-core --save

如果觉得慢,可以使用淘宝镜像cnpm
。此时,基础的babel6就安装完成了,如果你想安装babel5,那么执行如下的代码
npm install babel@5 --save

即可使用babel5,那么在后文的中,统一使用babel6
install-babel6.gif
install-babel6.gif

require hook安装好之后,问题来了,如何使用呢?
相信使用过coffee的人一定知道register,那么在babel中同样不例外,也可以使用同样的方法。
require('babel-core/register');require('./app');

大家可能以为这样我就可以在app.js
中优雅的使用es6了,在babel5中确实是这样的,但是在babel6中,缺不一样了。
如果你这样写完,并没有任何作用,因为你缺少一个插件。
安装插件
如果想使用es6语法,必须安装一个插件
npm install babel-preset-es2015

然后在文件夹下面创建一个叫.babelrc
的文件,并写入如下代码:
{ "presets": ["es2015"]}

下面你就可以很优雅的书写你的es6代码了。(https://dn-cnode.qbox.me/Fjus5qP3SlphDNqUDK5rRGzGcWB-)
书写优雅的ES6代码
下面我们写一段优雅的代码
let first = (size, ...args) => [...args].slice(0, size);export default first;console.log(first(2,1,2,3));

Run it
直接运行,不说话~~~ (https://dn-cnode.qbox.me/FqXz67mkqdugwFMkG5wSfm-sc_ye)
内容解释

.babelrc
什么是.babelrc文件呢?熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等的,类似bashrc,zshrc。同样babelrc在这里也是有同样的作用的,而且在babel6中,这个文件必不可少。里面可以对babel命令进行配置,以后在使用babel的cli的时候,可以少写一些配置,还有一个env字段,可以对BABEL_ENV或者NODE_ENV指定的不同的环境变量,进行不同的编译操作

“presets”
这个是babel6新加的,就是代表需要启动什么样的预设转码,在babel6中,预设了6种,分别是
es2015
stage-0
stage-1
stage-2
stage-3
react

至于如何安装,请查看balel官网
而且,对.babelrc的设置,你可以存放在package.json中的。如下:
{ ... "babel": { "presets": ["es2015"] }, ...}

require hook
require hook 的作用就是替换原先的require,以便在加载自动对代码进行编译,运行。
其实这个做的便是重写require.extensions
中对应的扩展名的加载程序,并且默认会判断这个文件是否是node_modules
中的模块,如果是的话,那么将不会进行转换。否则的话,会进行转换。
CLI
其实babel也可以当做全局变量来使用的
npm install babel-cli -g

安装上后,会安装如下四个程序到全局环境中:
babel
babel-node
babel-doctor
babel-external-helpers

babel
这个就是编译js文件的全局变量,具体如何使用,大家请参照官网。使用方法和coffee,style,less了类似,就不多讲了

babel-node
这里主要说一下这个东西,就是这个的作用就是提供一个node
命令相同的REPL环境,不过这个环境会在执行之前讲代码进行编译。
坑1:上文讲到,babel6默认是无法编译es6文件的,需要你手动安装es2015
的preset,同样,全局模式下,也需要这个preset。

那么问题来了,我们怎么安装这个preset呢?global?所以这是一个坑,我在babel的issue中找到这样的一条。作者给出这样的回答:我们处理preset和plugin是依据于输入的文件,而你直接运行CLI是没有输入文件的,也就无法定位preset和plugin的位置。言下之意就是不要全局安装,虽然我们给了你全局安装的方式。然后作者关闭了issue,表示很无奈。。。。
所以,如果大家想体验一下es6的REPL的话,建议安装babel5
npm install babel@5 -g

babel-doctor
就是检查babel状况的,主要检查以下几个内容
是否发现了.babelrc
配置文件
是否有重复的babel安装包,比如说安装了5和6
所有的babel安装包是否已经升级到了最新版
并且 npm >= 3.3.0

babel-external-helpers
就是讲一些公共的帮助函数提取成一个文件,其实就做了这一个作用。。。

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

推荐阅读更多精彩内容