javascript - 在 VSCode 扩展中使用 JavaScript DOM

Question

我正在尝试创建一个 Visual Studio Code 扩展，它将 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) 将结果输出到预览 Pane .

问题是，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 在 Node 环境中运行了类似的东西来运行 Angular 单元测试。

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

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