Изоморфный рендеринг с помощью Webpack

В качестве мыслительного упражнения я пытался создать приложение для ведения блога с использованием Isomorphic React. После некоторого поиска в Google я наткнулся на эти три учебника:

Носитель: современный изоморфный стек:
https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057

blog.lunarlogic.org: Как создать универсальное приложение Reactjs
http://blog.lunarlogic.io/2015/how-to-create-a-universal-reactjs-application-with-bare-reactjs/

В частности, меня смущает то, как html-webpack-plugin работает на стороне сервера.

Оба этих учебника имеют шаблоны, которые выглядят так:

<html>
<head>
...
</head>
<body>
...
<%- reactOutput %>
</body>
</html>

Однако, когда я пытаюсь запустить этот шаблон через веб-пакет, я получаю сообщение об ошибке, что reactOutput не определено.

В чистом клиентском приложении я бы использовал html-webpack-plugin для создания моего файла index.html для обслуживания клиентов. Это поколение облегчило бы мне задачу, потому что у меня разные конфигурации в webpack для разработки и производства. (Общие чанки и все такое)

Нужно ли мне вообще учитывать это, когда речь идет о рендеринге на стороне сервера? Или я все неправильно делаю?


webpack reactjs javascript isomorphic-javascript
person mikeyGlitz    schedule 13.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не думаю, что html-webpack-plugin фигурирует в уравнении, кроме как для предварительного создания шаблона. Получив содержимое шаблона, вы предоставляете его средству визуализации вместе со значением reactOutput.

Вы делаете вызовите, как показано здесь в строке 42, чтобы получить визуализированный контент:

var reactOutput = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);

Затем вы будете передавать эту переменную вместе с шаблоном. В учебнике они используют ejs для шаблонов, хотя вы можете подключить свои собственные:

res.render('index', {
    reactOutput: reactOutput)
});
person Ivo    schedule 13.05.2017
comment
Я понимаю, что вы говорите об использовании вывода из html-webpack-plugin в качестве шаблона, который обслуживается сервером с использованием res.render или res.send, но как насчет ошибок, которые я получаю из-за того, что <%- reactOutput %> не определено? Я думаю, что один из способов обойти это — прочитать весь файл в виде строки, а затем заменить код шаблона, но как это будет работать? - person mikeyGlitz; 14.05.2017
comment
Именно так работает рендеринг на стороне сервера. С ReactDOMServer вы визуализируете приложение в памяти, а затем возвращаете его клиенту. Есть еще пробел, который вам нужно заполнить, как я могу получить строку в памяти в шаблон? В учебнике, на который вы ссылаетесь, показано, как это сделать, используя ejs для шаблонов. Этот вариант ближе к вашей настройке шаблонов: bitdrift.com/post /2376383378/ - person Ivo; 15.05.2017
comment
В итоге я использовал fs.readFileSync для чтения шаблона и string.replace для внедрения серверной реакции в шаблон. Вероятно, не лучший подход, но, похоже, сработал. - person mikeyGlitz; 17.05.2017