热搜: fiddler git ip 代理
历史搜索

前端通过babel精准操作js文件技巧

游客2024-12-08 09:30:01
目录文章目录
  1. babel 修改 js 配置文件实现原理
  2. 操作 AST 三大阶段

babel 修改 js 配置文件实现原理

像那些 js 配置文件,里面可能有很多的非配置代码,而且一次可能要修改好几个文件

比如我们在前端项目,要插入一个页面,需要修改 router、menus 等配置文件,还要手动拷贝页面模板等等

这些高重复机械化操作,人工修改非常容易出错

我们可以直接用 babel 来操作 AST 抽象语法树,通过工程化去精准修改。让 babel 去帮我们找到指定位置,并正确插入配置代码。我们在做工程化开发的时候,经常会用到 babel 去操作 AST。

首先我们了解一下什么是 AST?

AST,抽象语法树(Abstract Syntax Tree)它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构。

我们使用 babel 来转化和操作 AST,主要分为三个步骤:解析(parser)、转换(traverse)、生成(generator)

前端通过babel精准操作js文件技巧 1

以上就是通过 babel 操作 AST,然后精准插入配置代码的全流程,完整代码参考:github

参考文章:链接

标签:JavaScript