通过babel操作AST精准插入配置代码全流程

更新时间：2022年02月08日 09:42:32 作者：厦门在乎科技

这篇文章主要为大家介绍了通过babel操作AST精准插入配置代码的全流程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步

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",
    ],
  });

configJsTree就是我们的AST了

加上sourceType: "module"这个配置属性，是为了让babel支持解析export和import

转换（traverse）

转换（traverse）阶段，就是要遍历整个AST抽象语法树，找到指定的位置，然后插入对应的配置代码。

代码如下：

const traverse = require("@babel/traverse").default;
 
traverse(configJsTree, {
    ObjectProperty(path) {
      // 插入配置文件代码
    },
  });

我们使用@babel/traverse的traverse方法进行遍历整个AST

其中ObjectProperty的作用是在遍历AST过程中，识别出所有的Object对象，因为我们是要将配置代码插入一个Object对象，所以使用的是ObjectProperty。如果要将配置插入数组中，就使用ArrayExpression。

然后我们开始进行配置代码的插入，将代码

{
  key: "testPath",
  icon: HomeOutlined,
  exact: true,
}

插入如下的位置

我们需要在traverse的ObjectProperty进行位置的查找和代码插入

首先我们要找到key: 'home'的位置

代码如下：

traverse(configJsTree, {
    ObjectProperty(path) {
      if ( path.node.key.name === "key" && path.node.value.value === "home" ) {
        // 这就是 key: 'home'的位置
      }
    },
  });

通过path.node.key.name和path.node.value.value找到对象属性为key并且对象值为home的Object对象

找到位置后开始插入代码

traverse(configJsTree, {
    ObjectProperty(path) {
      // 搜索并识别出配置文件里key: "home" 这个object对象位置
      if ( path.node.key.name === "key" &amp;&amp; path.node.value.value === "home" ) {
        path.parent.properties.forEach(e=>{
          if ( e.key.name === "children" ) {
           // 找到children属性
          }
        })
      }
    },
  });

通过path.parent.properties找到对象的父级，然后遍历父级下的所有属性，找到children这个属性。这就是我们要插入的位置。

接下来我们要构造要插入的数据

{
   key: "testPath",
   icon: HomeOutlined,
   exact: true,
}

构造数据的代码如下：

const t = require("@babel/types");
const newObj = t.objectExpression([
    t.objectProperty(
      t.identifier("key"),
      t.stringLiteral("testPath")
    ),
    t.objectProperty(
      t.identifier("icon"),
      t.identifier("HomeOutlined")
    ),
    t.objectProperty(
      t.identifier("exact"),
      t.booleanLiteral(true)
    ),
  ]);

可以看到用dentifier来标识对象的属性，用stringLiteral标识字符串数据，booleanLiteral标识boolean值，这些类型都可以在@babel/types查询到。

最后一步，将构造好的数据插入：

e.value.elements.push(newObj)

完成~！

将所有 traverse 阶段代码汇总起来如下：

const traverse = require("@babel/traverse").default;
const t = require("@babel/types");
 
traverse(configJsTree, {
    ObjectProperty(path) {
      // 搜索并识别出配置文件里key: "home" 这个object对象位置
      if ( path.node.key.name === "key" &amp;&amp; path.node.value.value === "home" ) {
        path.parent.properties.forEach(e=>{
          if ( e.key.name === "children" ) {
            const newObj = t.objectExpression([
              t.objectProperty(
                t.identifier("key"),
                t.stringLiteral("testPath")
              ),
              t.objectProperty(
                t.identifier("icon"),
                t.identifier("HomeOutlined")
              ),
              t.objectProperty(
                t.identifier("exact"),
                t.booleanLiteral(true)
              ),
            ]);
            e.value.elements.push(newObj)
          }
        })
      }
    },
  });

生成（generator）

这个阶段就是把AST抽象语法树反解，生成我们常规的代码

const generate = require("@babel/generator").default;
const result = generate(configJsTree, { jsescOption: { minimal: true } }, "").code;
fs.writeFileSync(resultPath, result);

通过@babel/generator将AST抽象代码语法树反解回原代码，jsescOption: { minimal: true }配置是为了解决中文为unicode乱码的问题。

至此咱们就完成了对js配置文件插入代码，最终结果如下：

以上就是通过babel操作AST，然后精准插入配置代码的全流程。

更多关于babel操作AST插入配置的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js图片轮播手动切换特效
这篇文章主要为大家详细介绍了js图片轮播手动切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
关于js new Date() 出现NaN 的分析
在一个项目中需要进行日期的格式化，后台传到前端是时间的整数（Date.getTime),当后台数据返回字符串时，发现转换日期时在ie下变成NaN，但是真的是这样吗？接下来我们慢慢分析
2012-10-10
基于javascript实现漂亮的页面过渡动画效果附源码下载
本文通过javascript实现漂亮的页面过滤动画效果，用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。用户体验度非常好，感兴趣的朋友一起看看吧
2015-10-10
js中将时间戳转化成YYYY-MM-DD HH:mm:ss的3种实现办法
最近开发中需要和后端进日期和时间传值,前后端约定为时间戳的格式,但是前端展示需要展示成年-月-日的格式,就需要进行日期和时间转换格式,这篇文章主要给大家介绍了关于js中将时间戳转化成YYYY-MM-DD HH:mm:ss的3种实现办法,需要的朋友可以参考下
2024-06-06
js获取滚动距离的方法
这篇文章主要介绍了js获取滚动距离的方法,涉及javascript针对页面滚动条的相关操作技巧,需要的朋友可以参考下
2015-05-05
js中hasOwnProperty()方法详解
本文主要介绍了js中hasOwnProperty()方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
解决layer.open后laydate失效的问题
今天小编就为大家分享一篇解决layer.open后laydate失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
微信小程序button组件使用详解
这篇文章主要为大家详细介绍了微信小程序button组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
微信小程序如何获知用户运行小程序的场景教程
这篇文章主要给大家介绍了在微信小程序中如何获知用户运行小程序场景的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来看看吧。
2017-05-05
JavaScript内置对象之Array的使用小结
这篇文章主要介绍了JavaScript内置对象之Array的使用小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05