Lato server reagire con Webpack 2 System.import

Question

Ho un'app isomorfa che utilizza webpack 2 per compilare le risorse. Ho aggiunto il chunking ora con System.import che funziona sul lato del webpack ma non sul lato server con la funzione non trovata.

Qualche idea su come posso risolvere questo?

Answer 1

Ci sono alcune opzioni disponibili per ottenere System.import lavorare con isomorfica rendering/server-side:

Feature-rileva System e polyfill

Node consente di chiamare require() in un certo numero di posti e shimming System.import come segue dovrebbe funzionare:

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

Se stai cercando un'implementazione più solida, c'è anche es6-micro-loader, che implementa un polyfill System che funziona sia nel browser sia nel nodo.

Usa babel-plugin-system-import-transformer sostituire System.import con il modello UMD equivalente

cioè assume la seguente forma:

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

e trasforma giù a:

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

o

Build with Webpack targeting Node (che utilizzerà richiedono per caricare pezzi):

webpack --target node 

Answer 2

Una di queste opzioni potrebbero soddisfare le vostre esigenze:

1. compilare il codice utilizzando Webpack w/target 'node' ed eseguire il lato server fascio.
2. Se si sta già compilando con babel usando babel-register o simili si potrebbe provare qualcosa come babel-plugin-remove-webpack (potrebbe essere necessario un PR per farlo funzionare con System.import oltre a require.ensure).
3. Definire una simulazione globale per System.import che restituisce solo una promessa risolta con il modulo require() 'd.