在VSCode扩展中使用JavaScript DOMD

问题描述：

我想创建一个Visual Studio代码扩展，将YoastSEO分析应用于我在Visual Studio代码中编写的文档（例如txt文件，markdown文件，asciidoc文件等）。在VSCode扩展中使用JavaScript DOMD

我已经创建了一个扩展的基本外壳，而我已经使用NPM添加YoastSEO：npm install https://github.com/Yoast/YoastSEO.js#develop

我创建了一个YoastProvider类，像这样：

const timerPeriod = 1000; // Time between preview updates 

export default class YoastProvider implements TextDocumentContentProvider { 
    // ... 
}

现在，在这个类，有一个preview方法，我想用于1）获取文档的内容，2）用Yoast处理，3）将结果输出到预览窗格。

事情是，Yoast API想直接使用DOM。 Here's an example from their github：

var snippetPreview = new SnippetPreview({ 
    targetElement: document.getElementById("snippet") 
}); 

var app = new App({ 
    snippetPreview: snippetPreview, 
    targets: { 
     output: "output" 
    }, 
    callbacks: { 
     getData: function() { 
      return { 
       keyword: focusKeywordField.value, 
       text: contentField.value 
      }; 
     } 
    } 
}); 

app.refresh();

我可以“伪造”出与nodom的元素，我可以通过字符串直接关键字和文字，但它并不重要，因为Yoast似乎在加工过程中使用DOM。所以我得到一个错误，document是从Yoast的app.js中未定义的。

有没有办法以这种方式使用YoastSEO？有没有其他的方法，我错过了？好像我可能会让它比应该更难。

答

将Yoast包装到包含类似jsdom的新上下文中可能是可能的，所以当它加载时它看起来就好像dom在那里一样。

我已经使用jsdom我自己使用圆顶类似的东西在节点环境内运行角度单元测试。

const yoast = (function(){ 
    global.document = jsdom(); // Use any virtual dom that you want really 
    const yoast = require('yoast'); 
    delete global.document; 
    return yoast; 
})();

不幸的是，它不如简单地导入模块，但它应该完成工作。

我喜欢这个想法，但我不确定如何使用TypeScript来实现它。 'global.document'让我错误'“Property'文件'不存在...”。也许我只需要找出TypeScript中的等价物？ –

在VSCode扩展中使用JavaScript DOMD

相关推荐