Question

使用react处理代码转换时，部署webpack应用程序的常规过程很简单，最终结果是一个包含所有css / js / html的.js应用程序。但我有一个应用程序需要客户端请求的一些数据来表达服务器。

例如，我希望从请求中获取userid，并根据该请求向App组件提供一些数据，然后提供.js文件（类似于webpack提供的内容）包含应用程序和用户特定数据。

我已经尝试过，使用babel-core/register和react-dom/server.renderToString，但它只提供给html和css，而不是js代码。使应用程序工作。我必须单独加载这些代码！

Answer 1

这是一个很常见的问题。最好解决它与你尝试的有点不同（你不想强迫你的用户等待〜10s为他构建捆绑包）

所有用户都有一个通用构建包（或少数 - 例如一个用于普通用户，第二个用于管理员用户）
您的服务器会从您的用户那里获取具有特殊参数的请求，例如userid
您的服务器渲染启动html页面作为对此请求的响应 - 例如index.html。此文件应<script src为您的用户捆绑js。源路径应该由服务器动态构建，以指向精确的js包（如果有多个）。它还应该有来自服务器的参数的javascript全局对象，您的组件应该可以看到它们。例如index.html可能看起来像（你可以用不同的方式做，也许不用创建全局对象。我希望你对这个想法有一般意义）。：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
  __CONFIG__ = {
    someObject1: '<!-- @echo someObject1 -->',
    someObject2: '<!-- @echo someObject2 -->',
    userid: '<!-- @echo userid -->',
  }
</script>
<script src="<!-- @echo SOME_PATH -->/static/bundle.js"></script>
</body>
</html>

现在，您的组件可以检查全局变量 CONFIG 。但我建议不要在正常组件中使用它！创建引导组件，加载您的正常反应应用程序，这类似于您的应用程序和环境之间的桥梁。在此引导程序组件中读取全局配置，然后将其作为道具传递给您的应用程序。

此引导程序组件可能如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
const config = window.__CONFIG__;

ReactDOM.render(
  <App
    config={config}
  />, document.getElementById('root'));

编辑：如果您必须基于db设置初始状态或告诉做出某些事情，这也是一种很好的方法。为此我添加了额外的全局变量__INIT__

在expressjs上动态转换和服务React应用程序

1 个答案: