Babel指南 - 基本环境搭建

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查询到插件的列表，你会看到如下的内容：

能够看到插件名称，是诸如：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官方的预设，主要包含如下的内容：

• es2015
• react
• stage-0
• stage-1
• stage-2
• stage-3

这些预设，包含了相关所需的插件包，在你的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：

点击右上角的 + ，会看到以下的界面：

选择 Babel 项：

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

对于 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));
})