Babel指南 - 基本环境搭建

原创
2016/05/02 06:20
阅读数 3.3K

ECMAScript的现状

ECMAScript,本身是一个脚本语言的设计规范,基于此规范,有许多为人熟知的语言,如JavaScript、ActionScript等。而时至几年前,随着Node.js的出现,以及HTML5带来的诸多新WebAPI,让JavaScript一下子提升到一个无比重要的位置。时至那个阶段,我们可以统称当时为ECMAScript5(ES5)。

那之后,很快就开始了对ECMAScript 2015(ES6)的制定,ES6一洗JS过去诸多的奇淫巧技、含糊不清的地方,带入了很多现代编程语言的特性,而且其推行的速度远比HTML5和CSS3要快。而在今天讨论ES6的时候,实际上ECMAScript 2016(ES7)已经在制定中(目前其实主要是修正和弥补ES6的不足),很多已经可以使用在实际生产环境中。

然而如上所述,即使是ES6,仍然有许多不足之处,所以急匆匆的ES7上线了,纵然你在使用ES6了,但是以今天的技术发展速度来说,既然ES7有了修正案,尽早的切入到ES7才能跟得上时代的步伐。

而JavaScript是一门需要环境依托运行的语言,无论是Browser环境下,还是服务器环境下,都需要环境的支持。下面这个列表,可以看到你的浏览器,和当前市面可支持JavaScript环境对ES6的支持情况:

https://kangax.github.io/compat-table/es6/

Babel

这时候,如果希望尝试使用ES6/ES7的,则可以使用Babel这个转译器。Babel本身的设计,就是针对JavaScript(所有需要转换为JavaScript)进行设计的。所以如官网的宣传语所说:

Babel transforms your JavaScript

Babel的官方网站:babeljs.io

Babel本身的设计是基于node.js环境下运行使用的,你也可以将babel-core用于浏览器环境。同时,有一个叫做babel-standalone的开源项目,则支持非node.js环境下使用Babel。

所以本文注重说明的是,基于node.js环境下配置和使用Babel的说明。

从深到潜,可以简单的将node.js下的配置使用情况区分为:CLI => 各种环境配置(GULP、IDE等)。

CLI环境

一般来说,使用Babel都是在各种环境内使用的,而很少直接使用CLI模式,但是这个模式能帮助理解Babel的基本配置。Babel有一大堆转换器插件,所以搞清楚他的配置方式是很必要的。

官方的博客有一篇基础环境下的安装说明:https://babeljs.io/blog/2015/10/31/setting-up-babel-6,这个篇章我只是将这个教程作为简单的翻译。

Babel基本安装

你有两个选项,全局的npm环境安装babel-cli,或当前项目下安装babel-core:

npm install --global babel-cli
// or
npm install --save-dev babel-core

添加插件(Plugins)

你可以在项目的根目录添加一个 .babelrc 文件(json格式)。

假定你需要一叫做 es2015-arrow-functions 的特性支持:

npm install --save-dev babel-plugin-transform-es2015-arrow-functions

注意,这是在当前项目目录添加的npm。

并修改 .babelrc 文件,将这个插件注册:

{
  "plugins": ["transform-es2015-arrow-functions"]
}

Babel提供了许多ES7的插件,具体可以查询官网的插件列表:Babel Plugins List

插件的命名机制

这里特别说明一下,Babel的插件名的命名机制的问题

首先,你可以在Babel Plugins List查询到插件的列表,你会看到以下的内容:

Babel Plugins List

可以看到插件名称,是诸如:es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping等。

其次,对应的在Babel的github上的项目中的packages目录下,上述的几个插件,名称则对应为:

es2015-arrow-functions        => babel-plugin-transform-es2015-arrow-functions
es2015-block-scoped-functions => babel-plugin-transform-es2015-block-scoped-functions
es2015-block-scoping          => babel-plugin-transform-es2015-block-scoping

再次,这些插件写入到 .babelrc 的配置文件中的名称,则对应为:

es2015-arrow-functions        => transform-es2015-arrow-functions
es2015-block-scoped-functions => transform-es2015-block-scoped-functions
es2015-block-scoping          => transform-es2015-block-scoping

为了统一称呼,我们定义如下:

插件名 - 形如:es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping

插件(安装)包名 - 形如:babel-plugin-transform-es2015-arrow-functions、babel-plugin-transform-es2015-block-scoped-functions、babel-plugin-transform-es2015-block-scoping

配置名 - 形如:transform-es2015-arrow-functions、transform-es2015-block-scoped-functions、transform-es2015-block-scoping

一般来说,在 .babelrc 中,或者是gulp中,或者是使用 babel-standalone 的在线转译功能,都使用的是 配置名 。一定要区分这三者的区别,不然很容易出错。

Babel预设值(Presets)

目前作为Babel官方的预设,主要包含以下的内容:

这些预设,包含了相关所需的插件包,在你的babel配置中(.babelrc),可以混合多个preset使用,同时还可以在此基础上追加plugin。

使用预设置,和插件的用法类似,先执行npm安装所需的包,然后在配置中加载:

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

.bablerc 文件中

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

gulp中使用

要在gulp中使用Babel是一个很简单的事情,官方提供了简单教程,这里我就不翻译了,因为很简单。

特别说明一下的是,如果你需要在gulp使用Babel的某个插件,必须npm安装在当前项目中,而不能使用global。也即:npm install babel-preset-es2015 --save-dev

gulp支持使用 .bablerc

在IDE环境中使用

这里以WebStorm为例,官网提供了教程,但其实JetBrians系列的IDE提供了一个叫做File Wathcer的机制的东西,支持实时修改文件的同时,即可自动对译出目标的文件,包括js、css等。这里主要介绍一下如何使用File Watcher。

首先,你需要全局安装babel-cli:

npm install --global babel-cli

其次,在WebStorm(JB家全系IDE通用),打开File -> Settings -> Tools -> File Watcher:

WebStorm - File Watcher

点击右上角的 + ,会看到如下的界面:

WebStorm - File Watcher - step 2

选择 Babel 项:

WebStorm - File Watcher - step 3

这里, File Type ,你可以选择ECMAScript 6,这样可以让你的项目保持对JS文件不进行处理。如下:

WebStorm - File Watcher - step 4

对于 Arguments ,你可以进行修改,具体的参数命令,可以参考Babel Options,比如: --source-maps --out-file $FileNameWithoutExtension$.js $FilePath$

至此,你可以在WebStorm的项目添加一个.es6的文件,每次保存的时候(你按Ctrl + S),他都会自动转译出一个.js文件出来。

使用babel-standalone实时转译

上面已经介绍过了,babel-standalone提供了接近于官方Babel同步的版本,并可以在非node.js的环境中使用,而且这个类库整合了babel大部分的插件。

你可以通过bower进行安装:

bower install babel-standalone --save

安装完毕后,直接在你的项目使用即可,他的转译参数,和 .babelrc 保持基本的一致。

defined(['babel-standalone'], function(babel) {
  var code = 'let helloWorld = "hello world"; alert(helloWorld)';
  var options = {
    presets: ['es2015'],
    plugins: ['transform-es2015-modules-amd']
  }
  eval(babel.transforms(code, options));
})
展开阅读全文
打赏
6
91 收藏
分享
加载中
呵呵~然并卵!
2016/05/02 14:44
回复
举报
n
2016/05/02 12:45
回复
举报
曾建凯博主

引用来自“红薯”的评论

凯哥现在玩得很洋

没这么严重吧 13,我最喜欢导入新东西了。
2016/05/02 09:15
回复
举报
赞,使用中
2016/05/02 09:05
回复
举报

引用来自“红薯”的评论

凯哥现在玩得很洋

好好的技术文章成红薯带出了喜感
2016/05/02 09:05
回复
举报
凯哥现在玩得很洋
2016/05/02 08:59
回复
举报
更多评论
打赏
6 评论
91 收藏
6
分享
在线直播报名
返回顶部
顶部