服務器端與webpack 2反應System.import

我有一個使用webpack 2編譯資產的同構應用程序。我現在添加了System.import，它在webpack方面工作，但在服務器端沒有找到函數。服務器端與webpack 2反應System.import

任何想法如何解決這個問題？

2016-05-09 Mohamed El Mahallawy

您使用的CSS模塊？當您將CSS導入組件時，是否發生這種情況？ – QoP

是的，當你在服務器上使用依賴於webpack的功能時，事情可能會發生。我創建了一個使用webpack捆綁服務器代碼的通用反應樣板。這樣您可以在服務器和客戶端代碼之間共享更多信息。 [在此處查看。]（https://github.com/ctrlplusb/react-universally）可能對您有用。我試圖評論webpack的東西很多。 – ctrlplusb

有許多可用於獲得System.import與同構/服務器端渲染工作的幾個選項：

特徵的檢測System和填充工具

節點可以調用require()在一些System.import應如下工作：

if (typeof System === "undefined") { 
    var System = { 
    import: function(path) { 
     return Promise.resolve(require(path)); 
    } 
    }; 
}

如果您正在尋找更強大的實施方法，那麼還有es6-micro-loader，它實現了可在瀏覽器和節點中工作的System填充。

使用babel-plugin-system-import-transformer與等效UMD圖案

即採用以下形式，以取代System.import：

System.import('./utils/serializer').then(function(module){ 
    console.log(module); 
});

並轉換它到：

new Promise(function (resolve, reject) { 
    var global = window; 

    if (typeof global.define === 'function' && global.define.amd) { 
     global.require(['utilsSerializer'], resolve, reject); 
    } else if (typeof module !== 'undefined' && (module.exports && typeof require !== 'undefined') || 
       typeof module !== 'undefined' && (module.component && (global.require && global.require.loader === 'component'))) { 
     resolve(require('./utils/serializer')); 
    } else { 
     resolve(global['utilsSerializer']); 
    } 
}).then(function(module){ 
    console.log(module); 
});

或

Build with Webpack targeting Node（將使用需要加載塊）：

webpack --target node

來源

2016-08-22 20:30:06 addyo

對於那些使用webpack v2並作出反應的人，我創建了一個庫來幫助解決這個問題。 ['代碼系分割component']（https://github.com/ctrlplusb/code-split-component） – ctrlplusb

這些選項之一可能滿足您的需求：

編譯使用的WebPack W/target 'node'您的代碼並運行捆綁服務器端。
如果你已經使用babel-register或類似的babel進行編譯，你可以嘗試類似babel-plugin-remove-webpack（除了require.ensure之外，可能需要一個PR才能使它與System.import一起工作）。
爲System.import定義一個全局模擬，它只需使用require（）'d模塊返回已解決的承諾。

來源

2016-05-10 00:16:37 riscarrott

服務器端與webpack 2反應System.import

回答

相關問題