Delay-Import in SystemJS

Question

Ich fange gerade an, SystemJS/JSPM mit React zu verwenden. In meiner Anwendung verwende ich Bibliotheken von Drittanbietern, die nicht in einem gängigen JS-Modulformat wie AMD, CJS usw. sind. Wenn ich diese Bibliotheken installiere, werden sie als globale Module installiert, zB hier wird die js-Datei generiert JSPM für eine Bibliothek:

module.exports = require("npm:admin-lte@2.3.3/dist/js/app.js"); 

Diese Bibliothek hat einigen Lauf Initialisierungscode wenn importiert, so dass es die DOM-Elemente sind bereit, bevor das erwartet. Wenn ich es zusammen mit React wie folgt importiere und benutze:

import adminlte from "adminlte"; 

export default class Root extends React.Component { 
    render() { 
     return (
      <div className="wrapper"> 
       <MainHeader /> 
       <MainSidebar /> 
       <MainContent /> 
       <MainFooter /> 
       <ControlSidebar /> 
      </div> 
     ); 
    } 
} 

Es funktioniert nicht. Ich nehme an, da die Bibliothek importiert wird und ihr Initialisierungscode ausgeführt wird, bevor React das DOM in den Browser rendert. Gibt es eine Möglichkeit, den Import von Drittanbieter-Bibliotheken zu verzögern, bis DOM von React gerendert wird?

ich in einem gewissen Lebenszyklus Ereignis aussehen in Reaktion wie componentDidMount, usw., aber immer noch nicht sicher, wie dies die dritte Partei Bibliothek durch Importieren

Answer 1

Schließlich arbeitet um richtig zu machen System.import() verwendet, nachdem die Hauptanwendung ist bereits geladen:

<script type="text/javascript"> 
    System.import("js/app/main.js") 
     .then(() => { 
      System.import("adminlte"); 
     });  
</script> 

es ist vielleicht nicht der beste Weg, dies zu lösen, so dass, wenn jemand einen besseren Weg hat, bitte