本地交互並呈現反應組件

Question

我有一些呈現svg元素的組件。我想要獲得一系列與生成的svg元素相對應的靜態圖像文件，以及各種屬性設置。例如像...

for (let i=0; i < 100; i++) { 
    let foo = <Foo bar={i} />; 
    foo.render(); // ??? 
    fs.writeFile(`foo_${i}.svg`, foo.outerHTML); 
} 

我可以創建這樣一個腳本，並嘗試以節點運行它，但我建立了我的項目，create-react-app它採用了一堆沒有節點（如ES6進口）支持的功能。

是否有一些其他的js引擎可以用來在本地運行此代碼，或者使用create-react-app使用的某些簡單方法掛接到transpiling設置？

有一些文檔與pre-rendering static HTML有關，但用例有很大不同。我不想爲了性能原因預渲染我的網站，我只是想渲染一個特定的組件，用一些特定的道具構建。

Answer 1

您可以使用Webpack與Babel將ES6轉換爲ES5。此外，webpack v2本身支持ES6導入語句。

構建完成後，您的節點服務器可以輕鬆地爲生成的包文件提供服務。