本文在 nodelover.me 同步发布
地址是：http://nodelover.me/#/blog/article/info/589ac0ee128fe10058fc83ff
看完本文，你可以对 babel 的一些插件有一个简单的认识，知道这些插件是干嘛用的，等需要用的时候，你还需要自己对照官网的文档进行配置。
why babel？
看近期的一些视频和文章，大家都知道，我最近是在学习和使用 TypeScript。所以大家可以不理解我为什么还要去学习 Babel 这个转换器。
原因如下
- TS 是 ES 的超集，TS 完全是可以编译成 ES 的样子，然后再通过 Babel 把 ES 编译成浏览器可以运行的 JS 代码。
- TS 除了一些自己的特性外，还包括了 ES 所有的特性。
- 只要 JS 可以运行，那么 TS 就一定可以解决，之所以报错，是因为找不到定义文件的问题，因为 ES 没有静态检测，所有我们可以先写 ES 来验证自己的一些想法。
前段时间我看见有人评价我说，拾人牙慧，都是照着文档读一偏。
当然你能把官网的一些资料阅读的很好，那么你一定很牛逼，呵呵。确实没必要听我废话，因为你都会了，但是你也可以试一试来写教程。
我了解可能大家想要我说出一些我自己的理解，其实在视频里面也有，但是我的理解始终是我的理解，不是你的理解，哪怕我告诉你，你也不一定理解。我能告诉你的是不理解去哪找答案，本着授人以鱼不如授人以渔的道理教大家写代码。
你问我要 🐟，我只能说抱歉，我没有。还有一些就是纯粹的键盘侠，不鸟就是了。
我认为脱离文档的讲解都是扯淡，视频，文章写了，就会过时，特别是 IT 类的技术文章，今天写的是 1.x 版本。10天后，对不起，官方发布 4.x 版本，预计年底发布 8.x 版本。这可能有点调侃 google 版本帝了。虽然没有那么夸张，但是事实确实如此。
尽管版本更新，但是它的文档也是随着更新的。只要文档不离手，走遍天下我都有。
使用
首先我们进入官网，官方直接给出了如何使用的例子。
安装依赖
npm install --save-dev babel-cli babel-preset-env
创建 .babelrc 文件
{
"presets": ["env"]
}
右边的这一块就是我们 ES2015 的语法新特性，不了解，直接点进去就可以查看。
babel-cli 就是我们的 babel 命令行工具，它会安装一个babel-node的命令行工具，它可以直接运行 babel 代码。
preset 就是预设的意思，babel-preset-env 就是环境预设。
babel-preset-env 的作用是什么？
英语看不懂，自己用翻译看，谁都想不劳而获，但这是不可能的。
这一个是环境支持表。
大概意思就是，通过 env 这个预设，或者说转换器，他可以根据你配置的选项，自动添加一些其他的转换器，来满足你当前的装换需求。
那么它一定有一些配置选项。
地址在这。
http://babeljs.io/docs/plugins/preset-env/
在页面里面我们可以看到这些配置项。而且下面也有 example，也就是例子。
我简单说一下这些配置项的作用。
- targets.node 支持到哪个版本的 node
- targets.browsers 支持到哪个版本的浏览器
- loose 启动宽松模式，配合 webpack 的 loader 使用
- modules 使用何种模块加载机制
- debug 开启调试模式
- include 包含哪些文件
- exclude 排除哪些文件
- useBuiltIns 是否对 babel-polyfill 进行分解，只引入所需的部分
npm install --save-dev babel-cli babel-preset-env
这一条命令究竟安装了些什么东西呢？
首先查看 .bin 目录
很明显，我们用的上的就是 babel、babel-node 命令。
还安装了 babel-polyfill、babel-register，babel-core 至于作用我们等会再说。
我们新建一个 src/app.js 文件。
写下以下代码
let func = () => {
console.log("hello babeljs");
}
func()
在 package.json 里面添加一些脚本
"scripts": {
"start": "babel-node src/app.js",
"compile": "babel src -d dist"
},
关于如何使用 babel 命令行通过以下命令查看
./node_modules/.bin/babel --help
运行一下这俩个命令。
polyfill
babel 只是会装换语法，而版本对一些对象添加的新 API ，babel-cli 则无能为力。所以我们只能通过 babel-polyfill 这个插件，它的原理就是通过老的方法，实现新 API 提供的功能，然后再挂载到响应的对象上面去。
修改 .babelrc，添加一些配置项
{
"presets": [
["env", {
"useBuiltIns": true
}]
]
}
修改 src/app.js
import "babel-polyfill"
let func = () => {
console.log("hello babeljs");
}
func()
运行转换命令
默认 import "babel-polyfill" 会转换为 require("babel-polyfill")，但是经过我们的配置后。
变成了以上的样子。
babel-register
他会修改你的 require 函数，让它具有引入 es2015 代码模块的能力。
新建一个 moduleA.js 文件
export default {
name: "yugo"
}
修改 app.js 文件
// require("babel-register")
const A = require("./moduleA.js")
console.log(A)
运行，它会报错。
解开我们的注释，这样就可以拿到我们的对象了。
babel-core
它是把一个es 代码字符串，编译成 js 代码字符串的工具。
React
假如你用了 React，你可能需要安装这个插件
其他插件
latest 预设 是 es2017，es2016, es2015 的综合体。
还有一些位于草案，提议阶段的功能的插件转移工具。
- Stage 0 - Strawman（展示阶段）
- Stage 1 - Proposal（征求意见阶段）
- Stage 2 - Draft（草案阶段）
- Stage 3 - Candidate（候选人阶段）
- Stage 4 - Finished（定案阶段）
进入 2 阶段，基本上都已经确定要发布了。
在 2015 年进入 stage4 的叫做 es2015
在 2016 年进入 stage4 的叫做 es2016
以此类推
stage-0
stage0 包括，stage1，2，3的特性，还有自己的一些特性，这里的特性是函数绑定与 do 表达式。不懂没关系，自己点进去看例子就明白了。
依次类推，1 包括 2、3的特性。
let a = do {
if(x > 10) {
'big';
} else {
'small';
}
};
// is equivalent to:
let a = x > 10 ? 'big' : 'small';
obj::func
// is equivalent to:
func.bind(obj)
obj::func(val)
// is equivalent to:
func.call(obj, val)
::obj.func(val)
// is equivalent to:
func.call(obj, val)
安装和使用
官方给出了很多使用的例子在这个页面，照着配置就行了。
http://babeljs.io/docs/setup/#installation
这些特性感觉用起来非常的畅快，但是 ts 好像不支持使用这些特性。这就非常尴尬了。
