這篇文章主要為答案及介紹了Babel?插件開發(fā)&訪問(wèn)節(jié)點(diǎn)實(shí)例詳解，整理一下?Babel?插件開發(fā)時(shí)用得到的轉(zhuǎn)換操作相關(guān)的?API，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

訪問(wèn)節(jié)點(diǎn)

獲取子節(jié)點(diǎn)的Path：

我們?cè)谔幚砉?jié)點(diǎn)的屬性之前必須要拿到節(jié)點(diǎn)對(duì)象才能進(jìn)行操作，我們使用path.node.property來(lái)訪問(wèn)屬性~

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

我們還可以使用 path 內(nèi)置的 get 函數(shù)來(lái)指定屬性名獲取屬性值~

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

檢查節(jié)點(diǎn)的類型：

檢查節(jié)點(diǎn)的類型我們可以使用內(nèi)置的工具類函數(shù)isXxx()~

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

我們?cè)跈z查類型的時(shí)候還可以順便檢查其中的某些屬性是否達(dá)到預(yù)期~

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

檢查路徑（Path）類型：

路徑具有相同的方法檢查節(jié)點(diǎn)的類型~

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

檢查標(biāo)識(shí)符（Identifier）是否被引用：

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

找到特定的父路徑：

向上查找特定節(jié)點(diǎn)可以使用~

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

如果也需要遍歷當(dāng)前節(jié)點(diǎn)~

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

查找最接近的父函數(shù)或程序~

path.getFunctionParent();

向上遍歷語(yǔ)法樹，直到找到在列表中的父節(jié)點(diǎn)路徑~

path.getStatementParent();

獲取同級(jí)路徑：

如果一個(gè)路徑是在一個(gè) Function／Program中的列表里面，它就有同級(jí)節(jié)點(diǎn)。

使用path.inList來(lái)判斷路徑是否有同級(jí)節(jié)點(diǎn)，
使用path.getSibling(index)來(lái)獲得同級(jí)路徑,
使用 path.key獲取路徑所在容器的索引,
使用 path.container獲取路徑的容器（包含所有同級(jí)節(jié)點(diǎn)的數(shù)組）
使用 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]
      }
    }
  };
}

停止遍歷：

當(dāng)我們遍歷完成目的后應(yīng)該盡早結(jié)束而不是繼續(xù)遍歷下去~

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

如果您在頂級(jí)路徑中進(jìn)行子遍歷，則可以使用2個(gè)提供的API方法~

path.skip()跳過(guò)遍歷當(dāng)前路徑的子路徑~

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 插件開發(fā)&訪問(wèn)節(jié)點(diǎn)實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于Babel 插件開發(fā)訪問(wèn)節(jié)點(diǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: