babel进阶用法之处理json文件

前言

社区里面关于babel的介绍非常多了，这里不想重复这些常见内容。很多人认为babel只是一个语法转译工具，将浏览器无法识别的高级语法进行转换（polyfill）,提升开发体验。其实babel是一个强大的工具链，它基于acorn和acorn-jsx，将js转化为抽象语法树（AST）,抽象语法树可以理解为一个大的对象，精细化定义了代码的所有细节。对这个大对象进行处理后，再将其转化为代码，这其实就是各种各样的babel插件代码转换的核心原理。本文也是从这里入手，以一个小例子，展示babel在处理json文件中的应用。

应用场景

假设有一个跟配置相关的大json文件，里面有各种各样的key,我们需要能够使用代码来动态修改这个大json中的内容，比如替换某个key的内容，删除某个key,新增内容等等。这里有人可能会说了，直接使用node中的fs读取文件并修改不可以吗？比较简单的文件的确可以这样操作，但是如果json结构比较复杂，比如有很多层级或者不同层级有相同的key,直接使用字符串进行匹配和搜索将变得非常繁琐，并且非常容易出错。这里我们借用babel的能力将json解析成抽象语法树，再进行对应的调整。

核心原理

读者可能会有疑问，babel只能处理js模块，如何处理json文件呢？json文件本身可以看做一个json对象，而babel内部显然是具有处理对象的能力的，为此我们只需要通过代码将json改写成js文件，将其传入babel转化成抽象语法树,对特定的部分进行修改之后，再转换回js代码。把js代码中的json对象导出，生成目标json文件。

代码实现

这里举一个简单的例子，假设有如下的json内容(origin.json)：

{
   
    "name": "wang",
    "ppp": 123
}

我们的目标是删除到ppp这条属性，并增加一个新的属性。直接上代码：

const babel = require('@babel/core');
const fs = require('fs');
const path = require('path');
//  原始json
const UPLOAD_DIR = path.resolve(__dirname, "origin.json"); // 大文件存储目录

//  通过babel插件，写入新的文件
const oldContent = fs.readFileSync(UPLOAD_DIR);
//  强行转换成js文件
const addContent = 'let b=' + oldContent + ';exports.b = b;';
//  通过babel处理替换，替换内容
const newContent = babel.transformSync(addContent, {
   
    plugins: ['./progressJson/plugin']
}).code;
//  生成中介文件
fs.writeFileSync('progressJson/relayFile.js', newContent, 'utf8');

function writeFinalFile() {
   
    const trueInfo = require('./relayFile.js').b;
    //  生成最终的结果
    fs.writeFileSync('progressJson/result.json', JSON.stringify(trueInfo), 'utf8');
}

writeFinalFile();

这里讲解下，首先用fs模块读取原始json的内容（以字符串的形式），然后开启黑科技，在头尾拼接特殊字符串，使其转变为js文件的字符串形式，传入babel.transformSync,引入我们的插件，进行处理之后，生成代码字符串。然后使用fs.writeFileSync将生成的字符串写成文件。最后再引用该文件，读取json变量，对其stringfy获得最终的内容，在将内容写入最后的文件result.json。核心逻辑都在我们的babel插件中。

替换属