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

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

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

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

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

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

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

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

我们使用babel来转化和操作AST，主要分为三个步骤：解析（parser）、转换（traverse）、生成（generator）

操作AST三大阶段

如下图，如果我们想通过babel，在配置文件里面插入一段配置代码，应该怎么实现呢

解析（parser）

第一步：读取配置文件代码，并生成AST抽象语法树

let configJsData = fs.readFileSync(configJsPath, "utf8");

然后将配置文件代码生成AST抽象语法树

const parser = require("@babel/parser");

let configJsTree = parser.parse(`${configJsData}`,{
    sourceType: "module",
    plugins: [
      "jsx",
      "flow",