在本地交互并呈现反应组件

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使用的转换设置？

有些文档与pre-rendering static HTML有关，但用例却截然不同。我不是出于性能原因而预先渲染我的网站，我只是想渲染一个特定的组件，用一些特殊的道具构建。

Answer 1

您可以将Webpack与Babel一起使用，这将将ES6转换为ES5。此外，webpack v2本身支持ES6 Import语句。

在此构建之后，您的节点服务器可以轻松地提供生成的捆绑文件。