Nodejs中使用babel相關的庫

需求

有 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這些庫的做用啥的我則是感受莫名其妙，我瞭解這些東西這麼詳細幹嗎，平時也用不到不知他是基於什麼想去了解的