Question

我正在尝试创建一个Visual Studio代码扩展，它将YoastSEO分析应用于我在Visual Studio Code中编写的文档（例如txt文件，markdown文件，asciidoc文件等）。

我创建了一个扩展的基本shell，我使用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。所以我在Yoast的app.js中收到document未定义的错误。

有没有办法以这种方式使用YoastSEO？我还缺少一些其他方法吗？好像我可能会让它变得更难。

Answer 1

有可能将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;
})();

可悲的是，它并不像简单地导入模块那么容易，但它应该完成工作。

在VSCode扩展中使用JavaScript DOM

1 个答案: