Reakcja po stronie serwera z pakietem webpack 2 System.import

Question

Mam aplikację izomorficzną, która używa pakietu webowego 2 do kompilowania zasobów. Dodałem teraz chunking z System.import, który działa po stronie opakowania WWW, ale nie po stronie serwera z nieznalezioną funkcją.

Każdy pomysł, jak mogę to rozwiązać?

Answer 1

Istnieje kilka opcji dostępnych dla coraz System.import pracy z izomorficzna renderowania/server-side:

Funkcja wykrywania System i polyfill

Węzeł pozwala zadzwonić require() w szeregu Miejsca i przyciemnianie System.import w następujący sposób powinny działać:

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

Jeśli szukasz bardziej niezawodnej implementacji, istnieje również es6-micro-loader, która implementuje polyfill System, który działa zarówno w przeglądarce, jak i w węźle.

Zastosowanie babel-plugin-system-import-transformer zastąpić System.import z równoważną UMD wzór

znaczy przyjmuje następującą postać:

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

i transformuje go do:

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

lub

Build with Webpack targeting Node (który użyje wymagają załadowania fragmenty):

webpack --target node 

Answer 2

Jedną z tych opcji mogą własnych potrzeb:

1. kompilacji kodu przy użyciu WebPACK w/target 'node' i uruchomić pakiet po stronie serwera.
2. Jeśli już kompilujesz się z babel, używając rejestru babel lub podobnego, możesz wypróbować coś takiego jak babel-plugin-remove-webpack (może być potrzebny PR, aby zadziałał z System.import oprócz require.ensure).
3. Zdefiniuj globalną próbę dla System.import, która właśnie zwraca rozstrzygniętą obietnicę za pomocą modułu require() 'd.