需要

有 js 文件的内容如下

(function getApis() {return {};
})();

客户端发来的申请如下

"/api/page2"

这时候 mock 程序要主动生成的内容如下

(function getApis() {
  return {
    "/api/page2": {
      body: {
        status: 200,
        data: {},},
    },
  };
})();

缩小复制粘贴的老本

掂量

首先要定位到 getApis 这个函数，而后找到其 return 语句的 { 地位，再插入值，可能解析 js 文件才够精准，天然想到了 babel

实现

取得 ast 形象树
cnpm install --save-dev @babel/parser

const babelParser = require("@babel/parser");
const ast = babelParser.parse(`
(function getApis() {return {};
})();

`);

找一个在线网站观看构造, 这很重要, 列如:https://astexplorer.net/

遍历节点
cnpm install --save-dev @babel/traverse

const {default: babelTraverse} = require("@babel/traverse");
let pos = null;
babelTraverse(ast, {FunctionExpression(path) {if (path.node.id.name === "getApis") {pos = path.node.body.body[0].argument.start + 1;
      path.skip();}
  },
});

FunctionExpression这个是怎么确定的呢，ast 在输入的时候曾经给到了

通过 path.node.id.name === "getApis" 确认这个是咱们要找的函数
pos 就是其返回语句{前面的地位了

插入新的内容
用到 @babel/types 有些麻烦，因为是插入内容，就间接操作字符串了，通过 prettier 格式化下代码，而后写入

      let content =
        mockFileStr.slice(0, pos) +
        `
        "${params.url}":${JSON.stringify(params.defaultConfig.autoCreateSettings.getDefaultValues(),
          null,
          2
        )},
        ` +
        mockFileStr.slice(pos);
      fs.writeFileSync(path.resolve(__dirname, moclFilepath),
        prettier.format(content)
      );

残缺的例子:https://github.com/xiaodun/sf…

感触

记得有一次电话面试被问到 babel 相干的问题，我就说是做代码转译的
对面示意这样很搪塞，至多要说出 @babel/core 这些库的作用啥的
我则是感觉莫名其妙，我理解这些货色这么具体干嘛，平时也用不到
不知他是基于什么想去理解的