Babel 外掛開發&存取節點範例詳解

2022-08-31 14:03:24

存取節點

獲取子節點的Path：

我們在處理節點的屬性之前必須要拿到節點物件才能進行操作，我們使用path.node.property來存取屬性~

BinaryExpression(path) {
  path.node.left;
  path.node.right;
  path.node.operator;
}

我們還可以使用 path 內建的 get 函數來指定屬性名獲取屬性值~

BinaryExpression(path) {
  path.get('left');
}
Program(path) {
  path.get('body.0');
}

檢查節點的型別：

檢查節點的型別我們可以使用內建的工具類函數isXxx()~

BinaryExpression(path) {
  if (t.isIdentifier(path.node.left)) {
    // ...
  }
}

我們在檢查型別的時候還可以順便檢查其中的某些屬性是否達到預期~

BinaryExpression(path) {
  if (t.isIdentifier(path.node.left, { name: "n" })) {
    // ...
  }
}
// 簡化前的程式碼
BinaryExpression(path) {
  if (
    path.node.left != null &&
    path.node.left.type === "Identifier" &&
    path.node.left.name === "n"
  ) {
    // ...
  }
}

檢查路徑（Path）型別：

路徑具有相同的方法檢查節點的型別~

BinaryExpression(path) {
  if (path.get('left').isIdentifier({ name: "n" })) {
    // ...
  }
}
// 等價於
BinaryExpression(path) {
  if (t.isIdentifier(path.node.left, { name: "n" })) {
    // ...
  }
}

檢查識別符號（Identifier）是否被參照：

Identifier(path) {
  if (path.isReferencedIdentifier()) {
    // ...
  }
}
// 或者
Identifier(path) {
  if (t.isReferenced(path.node, path.parent)) {
    // ...
  }
}

找到特定的父路徑：

向上查詢特定節點可以使用~

path.findParent((path) => path.isObjectExpression());

如果也需要遍歷當前節點~

path.find((path) => path.isObjectExpression());

查詢最接近的父函數或程式~

path.getFunctionParent();

向上遍歷語法樹，直到找到在列表中的父節點路徑~

path.getStatementParent();

獲取同級路徑：

如果一個路徑是在一個 Function／Program中的列表裡面，它就有同級節點。

使用path.inList來判斷路徑是否有同級節點，
使用path.getSibling(index)來獲得同級路徑,
使用 path.key獲取路徑所在容器的索引,
使用 path.container獲取路徑的容器（包含所有同級節點的陣列）
使用 path.listKey獲取容器的key

這些API用於 babel-minify 中使用的 transform-merge-sibling-variables 外掛.

var a = 1; // pathA, path.key = 0
var b = 2; // pathB, path.key = 1
var c = 3; // pathC, path.key = 2

export default function({ types: t }) {
  return {
    visitor: {
      VariableDeclaration(path) {
        // if the current path is pathA
        path.inList // true
        path.listKey // "body"
        path.key // 0
        path.getSibling(0) // pathA
        path.getSibling(path.key + 1) // pathB
        path.container // [pathA, pathB, pathC]
      }
    }
  };
}

停止遍歷：

當我們遍歷完成目的後應該儘早結束而不是繼續遍歷下去~

BinaryExpression(path) {
  if (path.node.operator !== '**') return;
}

如果您在頂級路徑中進行子遍歷，則可以使用2個提供的API方法~

path.skip()跳過遍歷當前路徑的子路徑~

path.stop()完全停止遍歷~

outerPath.traverse({
  Function(innerPath) {
    innerPath.skip(); // if checking the children is irrelevant
  },
  ReferencedIdentifier(innerPath, state) {
    state.iife = true;
    innerPath.stop(); // if you want to save some state and then stop traversal, or deopt
  }
});

以上就是Babel 外掛開發&存取節點範例詳解的詳細內容，更多關於Babel 外掛開發存取節點的資料請關注it145.com其它相關文章！