在 VSCode 扩展中使用 JavaScript DOM答案

【问题标题】：Using JavaScript DOM in VSCode extension在 VSCode 扩展中使用 JavaScript DOM
【发布时间】：2017-07-29 15:15:02
【问题描述】：

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

我已经创建了一个扩展的基本外壳，并且我已经使用 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？还有其他我想念的方法吗？看来我可能比应该做的更难。

【问题讨论】：

标签： javascript node.js dom typescript visual-studio-code

【解决方案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;
})();

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

【讨论】：

我喜欢这个想法，但我不确定如何使用 TypeScript 来实现它。 global.document 给我错误"Property 'document' does not exist..."。也许我只需要找出 TypeScript 中的等价物？