path.scope.bindings 是否只包含源代码中的变量，而不是 babel 转换时的动态插入?

Question

在使用 babel 插件转译我的代码时，我正在尝试插入一个导入语句。该语句可能会被动态插入多次，因此我必须确保之前不会插入它。

我曾经path.scope.hasOwnBinding和path.scope.hasBinding以确保它们不会与现有变量发生冲突，但它不适用于动态插入变量。

const conditions = ['view', 'text'];
function Plugin({types: t, template}) {
return {
visitor: {
ImportDeclaration(path, state) {
var node = path.node;
var sourceValue = node.source.value;
conditions.forEach(item => {
if (name === sourceValue) {
// multi insert
if (!path.scope.hasOwnBinding("AsyncComp") && !path.scope.hasBinding("AsyncComp")) {
const myImport = template(`import AsyncComp from "../src/";`, { sourceType: "module" });
path.insertAfter(myImport());
}
if (path.scope.hasOwnBinding("AsyncComp")) {
// never execute
}
if (path.scope.hasBinding("AsyncComp")) {
// never execute
}
}
});
}
}
}
}

我希望他们可以检测到我之前插入的变量，但遇到的错误消息Duplicate declaration AsyncComp

Answer 1

你的条件是错误的

if (!path.scope.hasOwnBinding("AsyncComp") || path.scope.hasBinding("AsyncComp")) {

是!path.scope.hasOwnBinding("AsyncComp")ORpath.scope.hasBinding("AsyncComp")，所以当path.scope.hasBinding("AsyncComp")返回 true 时插入import子句

您需要以下其中一项：

if (!(path.scope.hasOwnBinding("AsyncComp") || path.scope.hasBinding("AsyncComp"))) {

或

if (!path.scope.hasOwnBinding("AsyncComp") && !path.scope.hasBinding("AsyncComp")) {