2019-5-23 昨天学习新知识打卡-AST 抽象语法树

代码转AST网站地址:可以转JS,CSS,VUE,...

https://astexplorer.net/

理解

昨天看的webpack打包原理,之前一直没考虑过,一直以为是正则匹配,或者自己写的一套反编译,修改,再编译机制;能想象的就是元素之间是通过树形结构嵌套的;

 

看了视频后发现确实是这样的;

webpack打包大体机制

1.加载配置文件;

2.读取入口文件,分析入口文件,分析出所有依赖的库文件; 

3.过程为   源码使用开源ast工具分析库解析为AST树--->修改AST树的属性或者值(如去掉注释,变量替换等)--->用js工具把AST树再编译成源码,并放入依赖文件库value中,key值为分析的源码相对路径,如./src/main.js;

4.按照webpack模板样式{"./src/mian.js"," eval(" webpack_require('  ast新转义后的代码 ')"},生成依赖的文件json;

5.生成打包后的入口文件

 

 

AST并不是什么很难,但是要知道如何用js库提取并修改,了解后可以用AST做很多事情; 如写webpack插件,定制自己的插件...