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

转载 AjaxJq 2020/3/26 11:31:18

如图所示为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最终也可以被浏览器所运行。

以上内容是经过个人学习消化后的结果,如有不严谨之处,忘大家多多包涵,毕竟是我的第一篇技术文。谢谢! 欢迎评论,欢迎指导

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[前端构建环境工具之webpack中babel的工作原理]http://www.zyiz.net/tech/detail-121683.html

上一篇:前端基础整理 | 网络相关(二)

下一篇:基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    扫一扫关注最新编程教程