在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？有沒有其他的方法，我錯過了？好像我可能會讓它比應該更難。

來源

2017-03-08 Matthew Groves

將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; 
})();

不幸的是，它不如簡單地導入模塊，但它應該完成工作。

來源

2017-03-08 21:45:05

我喜歡這個想法，但我不確定如何使用TypeScript來實現它。 'global.document'讓我錯誤'「Property'文件'不存在...」。也許我只需要找出TypeScript中的等價物？ –

在VSCode擴展中使用JavaScript DOMD

回答

相關問題