代码转AST网站地址:可以转JS,CSS,VUE,...
理解
昨天看的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插件,定制自己的插件...