Блог

Главная - Вопросы по программированию - Предварительная компиляция реакции с помощью Webpack

Предварительная компиляция реакции с помощью Webpack

#javascript #reactjs #webpack

#javascript #reactjs #webpack

Вопрос:

Я хотел бы предварительно скомпилировать компонент React, используя ReactDOMServer.renderToString, и внедрить его в мой html-webpack-плагин с помощью 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, но я не нашел никакой документации о том, как его использовать, поэтому я не могу сказать, является ли это жизнеспособным вариантом.

Ответ №1:

Оказывается, что «простое» <%= require('render.js') %> на самом деле работает. То, с чем я столкнулся, было еще одной ошибкой, которая заставила меня думать, что это не так.

Таким образом, вполне возможно предварительно скомпилировать компонент React с помощью Webpack. (Только не ожидайте, что он будет работать с mini-css-extract-plugin, пока они не исправят ошибку.)