前端构建环境工具之webpack中babel的工做原理

如图所示为babel工做原理图： 整个babel粗略地其实就是三个转化节点：从获取入口文件(entry)后通过babylon这个工具的解析(parse)， 进入AST(abstract syntax tree)抽象语法树的节点，因为AST只是一种对于entry代码的描述，并不能被浏览器运行， 因此最终还须要被转化为output这个出口文件，也就是代码的形式。

接下来咱们对AST这个节点进行展开，AST在parse后，原来entry文件使用的代码语法为es6(也有多是es7/8/9/10，这里仅仅举例方便说明)不会发生改变，(transform)改变的仅仅是code->AST，也就是代码形式->抽象语法树,从能被浏览器运行->不能被浏览器运行。

如图所示，首个AST节点须要被进一步处理，通过babel-traverse的加工后，ES6->ES5/3(ES5或者ES3),语法上"降维"了， 对于不少不支持ES6-10的浏览器而言，ES5/3是能够很好的被支持的。至此，AST还不完善，就是这样的代码通过层层处理后的结果 会有安全性、不及开发者预期的问题。因此还须要通过plugins(插件)对它的加工，该步骤的加工能够对代码进行增删改，继续生成本图中最后的那个AST。

最终阶段就是通过babel-generator这个工具完成generator(生成)output(出口文件)这样的结果，形式也从AST->code。而code最终也能够被浏览器所运行。

以上内容是通过我的学习消化后的结果，若有不严谨之处，忘你们多多包涵，毕竟是个人第一篇技术文。谢谢！ 欢迎评论，欢迎指导