理解babel

在利用webpack开展项目的时候，涉及到babel对es6的转换，一直对里面的原理比较模糊，抽个时间整理一下，还是先来了解几个概念。

js编译（编译器）

我们所写的JavaScript代码，在被js引擎运行之前有一个编译的阶段，转化为内部可执行的代码，主要包括三个阶段。

词法分析+分词（tokenizing）：把所写的js代码进行检查，形成词法作用域,得到词法单元

语法分析（parsing）: 分析代码中的语法得到AST,称为抽象语法树，可以联想到DOM树

代码生成（raw code）: 利用AST生成js语言认可的代码

babel工作过程

与编译的过程类似，babel转译过程也有三个阶段，每个阶段需要用到相应的包

分析 (parsing): 利用Babylon将es6代码解析得到AST，完成了词法和语法分析。

转换（transforming）: 利用babel-traverse对AST树进行遍历并转译，得到新的AST。在转译的过程中需要词法插件，这也是插件应用的主要位置。

生成（generating）: 利用AST生成es5代码

配置babel

通常是将babel在package.json进行配置，也可以使用单独的.babelrc文件

plugins

由上面可以知道，plugin主要用于转译的第二阶段，这个阶段还是用到了parsing阶段的词法插件，因为有AST生成的过程

presets

预设的插件集，免去了个人配置的过程

我们知道，现在可以将es6的代码转为es5代码，但是es6新增的变量对象，方法还没有迁移过来，有以下的解决方案

polyfill

会把es6环境全部引到你的代码环境，从而可以使用新的对象，API,会造成代码量过大，有时只需要一部分的功能。而且通常是在某个具体模块中使用，毕竟polifill会造成全局环境污染。通过在对象的原型上添加方法，主要是解决新的api以及方法

babel-runtime

将es6代码编译成es5，主要解决的是语法上的差异，而且利用plugin的自动识别，实现按需引入，也不会造成全局变量的污染