《深入理解ES6》阅读笔记 --- babel

在2017年相信ES6已经得到了很大的普及，如果你写过React或者Vue，相信在多年之前就已经体验过ES6的魅力了。言归正传，《深入理解ES6》阅读笔记并不会照搬书上的内容，因为我觉得那很无趣，这些读书笔记会贯穿我自己所积累的知识和理解，而今天要给大家写一写babel。

查询如何配置

（如果你是第一次听说到babel不要害怕，继续往下看，我保证配置会非常简单），我应该不会写任何配置代码，授人以鱼不如授以渔，我会教会你如何通过官方找到你想要的内容。打开这个网站 http://babeljs.io/ 你会看到babel的简单介绍 Babel is a JavaScript compiler，看样子是需要Node.js的支持了。（至于怎么安装Node.js可能要你自行Google了，我会默认你已经安装好了Node.js。）不管你用Webpack还是gulp，你都可以通过Docs -> Setup（菜单上）来找到对应的构建工具支持：

DingTalk20170819195011.png

点击Webpack看看，?。

高级篇

【下图，通过点击Webpack而来。】

DingTalk20170819195317.png

试着通过从2-4步骤编写一个简单的例子，比如：

let name = 'icepy'  // -> index.js

看看这个文件是如何运行的，如果运行成功的话，那么恭喜你完成了第一步，接下来你要学习到如何配置preset和plugins了。

• https://babeljs.io/docs/plugins/preset-env
• http://babeljs.io/docs/plugins

这两个URL你可以通过Docs -> plugins 以及在.babelrc这里点击env preset。现在的babel将核心功能通过preset 和 plugin 来配置，正常情况下，你只需要配置 es2015即可。如果你想追求更多的功能集合，比如支持某些ES7的特性，那么就需要开启其他的preset或者plugin了。

举例：

const profile = { name: 'icepy', id: 'nices'}console.log(...profile)

你想使用展开对象的功能，很遗憾，如果你只配置了es2015 preset，这还不够。那么，我该如何处理这个问题呢？

如果你仔细阅读过文档，你应该可以发现有Stage 0，Stage 1这样的字样，Stage 目前来说是按照JavaScript提案来区分的，数字越小，说明提案的时间与现在的时间越接近，这也意味着Stage 0 包含所有的 Stage，这些预设选项，你都可以通过 env preset 这篇来理解其区分。

当然你也可以通过plugin找到对应的插件，比如展开对象的插件是babel-plugin-transform-es2015-spread，那么我该如何配置插件呢？如果你有兴趣，不妨阅读一下 https://github.com/babel/babel-preset-env/blob/master/data/plugin-features.js 这个文件。

"plugins": ["transform-es2015-spread"]

这个插件被预置在es2015这个preset中了，理论上你并不需要如此配置。

当你对编译输出的代码有环境上的需求时，你还可以通过Options来开启一些额外的功能：

presets:['es2015',{ //Options }]

比如此刻我想设置一下我的代码需要支持的环境，你可以如此配置：

presets:['es2015',{
 targets:{
   node: 'current'
 }
}]  

又比如我想设置一下模块的支持，当然默认就是支持commonjs的，如果你想还回到过去，比如amd，那么你就需要设置这个modules属性了。

presets:['es2015',{
  modules: 'amd'
}]

结语

babel的东西不多，基本上如何配置你都可以在官网上找到答案，尝试着用一下吧。如果你对编写插件或preset有兴趣，你也可以阅读 https://babeljs.io/docs/plugins/#plugin-development 或者 https://babeljs.io/docs/plugins/#creating-a-preset 来找到你想要的答案。