Я бы хотел предварительно скомпилировать компонент React, используя ReactDOMServer.renderToString , и вставить его в мой html-webpack-plugin с помощью Webpack. Я хочу сделать это раньше времени. Он должен компилироваться как статический файл HTML. У меня в рабочей среде нет сервера node.js для рендеринга на стороне сервера.
Другими словами, скажи, что у меня есть следующее:
// render.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import MyComponent from 'MyComponent';
export renderToString(<MyComponent />);
и у меня есть следующий шаблон html-webpack-plugin:
<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<main id="root"></main>
</body>
</html>
Есть ли способ вставить результат из render.js в "корневой" элемент в index.ejs?
Я пробовал некоторые очевидные вещи, такие как <%= require('render.js') %>, но это никогда не сработает, поскольку в нем отсутствует вся среда разработки React.
В html-webpack-plugin упоминается «объект компиляции», который доступен в шаблоне EJS, но я не нашел никакой документации о том, как его использовать, поэтому я не могу сказать, является ли это приемлемым вариантом .