Babel6的学习新姿势

前言

在学习ES7的时候肯定会使用到Babel，然后就我就找了一些demo来看人家是如何配置Babel的，于是乎，各种参数就会莫名其妙的在那里，于是乎，一大堆问题就会在我脑海中出现：

Babel为什么有两种截然不同的配置方法？(也就是Babel5 vs Babel6)
为什么安装包会使用babel-register而不需要babel-core？
为什么要使用babel-polyfill？
为什么preset中设置的是stage-2而不是其他stage？
有了babel-plugin-transform-async-to-generator还需要babel-plugin-syntax-async-functions吗？
那么各位童鞋看到这里，如果上面的问题你的心中都明白的话，这篇文章应该是不适合你的，否则大家可以细细听我道来缘由。

1、Babel5 vs Babel6

Babel6是在2015年10月30号发布的，所以仍然有一些项目在使用Babel5，因此你就有可能看到两种不同的配置方法。因此我们只要大致了解一下这两种版本之间的一些重要区别即可：

babel这个npm包不再存在，取而代之的是几个重要的核心包：babel-core、babel-cli、babel-polyfil等。
每一种转换现在成为了插件，包含ES2015和JSX
Babel6需要添加预置条件或者一系列的插件，也就是说如果你想要使用ES2015的所有特性，那就添加babel-preset-es2015这个预置条件，如果你只想要使用其某个或某几个特性，那么可以直接添加对应的插件(转换)即可。
.babelrc现在成为必配的文件，根据官网解释，Babel6已经移除了默认的转换，如果你没有指定任何插件/预置条件，那么Babel将返回原始代码。(要知道在Babel5中是默认将ES2015和React作为默认的转换的)
stage-0现在分离成一个预置条件，而不是一个选项
选项--external-helpers现在也称为了一个插件。

至于如何升级Babel6可以参考Quick guide: how to update Babel 5.x -> 6.x

2、Babel Package

Babel Package包含了几类：核心包、外围包、预置条件包、插件包。我们根据官网的解释来大致了解一下这些包，让大家心中有数，以后使用Babel的时候可以自己决断，而不是到处去问。

2.1、核心包

babel-core：babel的编译器；它暴露了babel.transform方法。
babylon：Babel的分析器
babel-traverse：Babel的遍历器，所有的transformers都使用该工具遍历所有的AST(抽象语法树)。
babel-generator：Babel生成器。

整个编译器就被分成了三部分：分析器、转换器、生成器，大致的流程是：

输入字符串 -> babylon分析器 -> 得到AST -> 转换器 -> 得到AST -> babel-generator -> 输出

2.2、外围包

babel-cli是可以运行babel-core的CLI工具(包含了babel-node命令)，通过它你可以编译一个文件、一个目录然后输出到一个文件或一个目录或者stdout中。
babel-types 用于检验、构建、改变AST节点
babel-polyfill只是core-js和regenerator-runtime的一个简单封装。
babel-runtime类似于polyfill除了它不会修改全局作用域并且是和babel-plugin-transform-runtime一起使用的。
babel-register：通过绑定到node的require中实现在程序运行的时候自动编译文件的功能。
babel-template 是一个辅助性功能，用来生成AST节点。这样的话你就可以传递给一段你想创建的代码而不用繁琐地使用babel-types来编译它们。
babel-helpers是一组预先做好的babel-template功能，用在一些插件上。
babel-code-frame 是一个独立的包，用于生成错误，并打印对应的源码以及源码错误的位置。

2.3、预置条件包

预置条件只是一组简单的插件集合让你更容易地运行整个一组转换器而不需要手动去指定。目前官方维护的预置条件有下面几个：

babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
babel-preset-react

2.4、插件包

如今的Babel运作都是依靠这些插件包了，插件包分为转换插件以及语法插件。这个类型的包比较多，就不列出来了，可以参考：http://babeljs.io/docs/plugins/。

如果你想查找每个预置条件包含的哪些转换插件，也可以在上面的链接上找到。值得注意的一点是：转换插件已经包含了语法插件，所以无需二者同时引用进来，这个刚好解答了问题5！

3、Babel-register

要回答问题2其实很简单，看一下babel-register的package.json文件就知道了，它依赖了babel-core，所以自然就不需要了。根据第2.2小节的介绍，我们知道babel-register是绑定了node的require命令，每当我们使用require文件加载后缀为.es6、.es、.jsx、.js的时候都会自动使用Babel进行编译转换。因为这种转换是实时转换，所以建议只在开发环境下使用。

默认是不会去转换node_modules下的文件，不过也可以配置重写：

require("babel-register")({
  // This will override `node_modules` ignoring - you can alternatively pass
  // an array of strings to be explicitly matched or a regex / glob
  ignore: false
});

ignore可以使用正则表达式、函数形式来使用。同时还提供了only、extensions进行配置,具体参考Require Hook。

4、babel-polyfill

回答问题3需要知道该包是干嘛的，上面的小节中略微提过，不过不够细致。我们知道Babel默认是只转换JS的语法的，一些重要的API如Promise、WeakMap，一些静态方法Array.from或Object.assign、实例方法Array.prototype.includes以及生成器函数都是没有转换的。这个时候我们就需要该包来进行转码。polyfill是会添加到全局作用对象中去就像原生的原型String一样。

Babel默认不转码的API非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js。

所以如果你想体验完整的ES6，那么还是建议添加该包。

5、preset

想要理解preset中的stage，那么你就需要阅读TC39。TC39是专门负责演进ECMAScript编程语言以及认证其规格的委员会。他们将ECMAScript中的每一个新特性的最终定稿分为了5个阶段，也就是大家看到的：

stage-0 - Strawman: just an idea, possible Babel plugin.
stage-1 - Proposal: this is worth working on.
stage-2 - Draft: initial spec.
stage-3 - Candidate: complete spec and initial browser implementations.
stage-4 - Finished: will be added to the next yearly release.

那么我们如何判断我们需要使用的stage是哪一个呢？

在TC39的提案中，有对应的一个详细的列表表明哪种特性处于哪个阶段：https://github.com/tc39/proposals 。如果你想要用到对应的特性，查找其处于的阶段即可。

Babel是会根据每一次TC39的会议更改的特性实时地改变自己的代码实现，这一点做的相当给力。一般我们不建议使用stage-0，因为该阶段的特性是最不稳定的，极有可能在未来中不会集成到任何的JS版本中去。

注意：stage预置条件是会后向兼容的，也就是说stage-0的预置条件是会包含stage-1、stage-2、stage-3等预置条件的

至此5个问题已经回答完毕(啊？问我没有回答第5题？那请仔细看看前面说的哈)，不知道大家对Babel有了更加细致的认识了？写完这篇我就立马发现组内的项目中有一个项目的Babel使用有一些不合理的地方，立马修改优化去了~~~~~~

参考

http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/
https://babeljs.io/blog/2015/10/31/setting-up-babel-6
https://github.com/babel/babel
插件与预置条件的关系
Babel用户手册

最后

欢迎访问我的个人博客主页：豆米的博客