動態transpile和服務expressjs上的React應用程序

當使用webpack來處理代碼轉換並且最終結果是一個包含所有css/js/html的.js應用程序時，部署react應用程序的通常過程很簡單。但是我有一個應用程序，它需要客戶端的一些數據來表示服務器。動態transpile和服務expressjs上的React應用程序

比如我想從該請求userid，並基於該提供一些數據來App組件，然後，提供.js文件（像什麼的WebPack提供），其中包含的應用程序和用戶特定的數據。

我已經試過了，用戶babel-core/register和react-dom/server.renderToString，但它只是提供了html和css而不是js代碼，需要使應用程序的工作。我必須單獨加載這些代碼！

來源

2016-05-16 Shahinism

這是很常見的問題。這是更好地解決這個問題有點不同，你嘗試過（你不想強迫你的用戶等待10秒〜建立捆綁他）

沒有爲所有用戶一個通用的構建束（或一些 - 例如，一個普通用戶和第二admin用戶的）
您的服務器從用戶的特殊參數獲取請求例如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。但我建議不要在正常的組件中使用它！創建啓動組件，加載您的正常反應應用程序，並且這是您的應用程序和環境之間的橋樑。在此引導組件中讀取全局配置，然後將其作爲道具傳遞給您的應用程序。

這bootstrap部分可能看起來像：

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'));

編輯：這也是很好的方法，如果你有一個基於數據庫設置初始狀態或告訴反應做一些事情。爲此，我添加了其他全局變量__INIT__

來源

2016-05-17 19:02:58

加載時間是迫使我選擇接近您建議的方法的瓶頸。我在'fetch（）'調用中使用該用戶標識來檢索用戶數據。謝謝... – Shahinism

動態transpile和服務expressjs上的React應用程序

回答

相關問題