babel 修改 js 配置文件实现原理
像那些 js 配置文件,里面可能有很多的非配置代码,而且一次可能要修改好几个文件
比如我们在前端项目,要插入一个页面,需要修改 router、menus 等配置文件,还要手动拷贝页面模板等等
这些高重复机械化操作,人工修改非常容易出错
我们可以直接用 babel 来操作 AST 抽象语法树,通过工程化去精准修改。让 babel 去帮我们找到指定位置,并正确插入配置代码。我们在做工程化开发的时候,经常会用到 babel 去操作 AST。
首先我们了解一下什么是 AST?
AST,抽象语法树(Abstract Syntax Tree)它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构。
我们使用 babel 来转化和操作 AST,主要分为三个步骤:解析(parser)、转换(traverse)、生成(generator)
以上就是通过 babel 操作 AST,然后精准插入配置代码的全流程,完整代码参考:github。
参考文章:链接