是否可以使用 Node.js 从 React 获取 HTML 和 CSS 输出？

Question

我不确定这是否有意义，我想我会看到的！

基本上，假设我有一个 React 组件。我还使用 Styled Components 对其进行了样式设置。现在，我想看看结果。问题是，我在Node.js 中运行它。我最好希望以静态网页的字符串/文件的形式接收输出，即 HTML 和 CSS。

以 React Native 为例 - 它采用具有样式化组件的 React 代码，并将其呈现给 Android、iOS 和（静态）网络。我希望能够将这些 React 内容渲染为静态文件。

我认为我需要一个 React 解析器，或者类似的东西。自定义实现很好。

这甚至可能吗？我会在这里过头吗？还是答案比我想象的简单？

Answer 1

如果我对您的理解正确，using webpack as a node module 可能会对您的情况有所帮助。您只需将编译器的输出重定向到虚拟（模拟）文件系统（或者您可以使用真正的 FS，如果这不是问题），然后访问它以获取文件内容：

_{来自 Webpack 文档：}

const { createFsFromVolume, Volume } = require('memfs');
const webpack = require('webpack');

const fs = createFsFromVolume(new Volume());
const compiler = webpack({ /* configuration */ });

compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
  // Read the output later:
  const content = fs.readFileSync(/* output path */);
});