解析页面 Config 配置

在业务代码编译成小程序的代码过程中，有一步是将页面入口 JS 的 Config 属性解析出来，并写入 *.json 文件，供小程序使用。那么这一步是怎么实现的呢？这里将这部分功能的关键代码抽取出来：

// 1. babel-traverse方法， 遍历和更新节点
traverse(ast, {
  ClassProperty(astPath) {
    // 遍历类的属性声明
    const node = astPath.node;
    if (node.key.name === "config") {
      // 类的属性名为 config
      configObj = traverseObjectNode(node);
      astPath.remove(); // 将该方法移除掉
    }
  },
});
// 2. 遍历，解析为 JSON 对象
function traverseObjectNode(node, obj) {
  if (node.type === "ClassProperty" || node.type === "ObjectProperty") {
    const properties = node.value.properties;
    obj = {};
    properties.forEach((p, index) => {
      obj[p.key.name] = traverseObjectNode(p.value);
    });
    return obj;
  }
  if (node.type === "ObjectExpression") {
    const properties = node.properties;
    obj = {};
    properties.forEach((p, index) => {
      // const t = require('babel-types') AST 节点的 Lodash 式工具库
      const key = t.isIdentifier(p.key) ? p.key.name : p.key.value;
      obj[key] = traverseObjectNode(p.value);
    });
    return obj;
  }
  if (node.type === "ArrayExpression") {
    return node.elements.map((item) => traverseObjectNode(item));
  }
  if (node.type === "NullLiteral") {
    return null;
  }
  return node.value;
}
// 3. 写入对应目录的 *.json 文件
fs.writeFileSync(outputPageJSONPath, JSON.stringify(configObj, null, 2));

从以上代码的注释中，可以清晰的看到，通过以上三步，就可以将工程里面的 Config 配置转换成小程序对应的 JSON 配置文件。