Wie Typoskript Modul konsumieren: System-Export mit systemjs in Browser

Question

Ich versuche systemjs zu verwenden, und ich habe diesen Code mit tsc exportiert: https://github.com/quantumjs/solar-popup/blob/master/package.json#L10

{ 
    "compilerOptions": { 
    "module": "system", 
    "target": "es5", 
    "sourceMap": true, 
    "outFile":"./build/solar-popup.js", 
    "sourceRoot": "./src/SolarPopup.ts", 
    "rootDir": "./src/" 

    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

aber dann versucht, es im Browser zu konsumieren Das importierte Objekt enthält keine der Exporte. Ich denke, das auf den Solar popup.js zurückzuführen ist keine Ausfuhr enthält, nur System.register nennt

Der Export wie folgt aussieht:

System.register("SolarPopup", ["ModalBackground", "constants"], function (exports_4, context_4) { 
    "use strict"; 
    var __moduleName = context_4 && context_4.id; 
    var ModalBackground_1, constants_2, SolarPopup; 
    return { 
     setters: [ 
      function (ModalBackground_1_1) { 
       ModalBackground_1 = ModalBackground_1_1; 
      }, 
      function (constants_2_1) { 
       constants_2 = constants_2_1; 

etc

Answer 1

Wenn Sie haben diese beiden Optionen in tsconfig.json

"module": "system", 
"outFile":"./build/solar-popup.js", 

Typoskript erzeugen einzelne Ausgabedatei, die mehr System.register Anrufe enthält, die jeweils ein Modul mit eigenem Namen Registrierung:

System.register("SolarPopup", ["ModalBackground", "constants"], function ... 

„SolarPopup“ ist ein Modulname hier. SystemJS interpretiert diese Datei als bundle, not a module.

Das Ergebnis des Imports eines Bundles ist ein leeres Objekt, und ein Nebeneffekt ist, dass alle darin enthaltenen Module registriert sind und sofort für den Import verfügbar sind, ohne sie abzurufen.

Sie benötigen also einen zusätzlichen Import, um ein Modul aus dem Bundle zu erhalten. Versuchen Sie folgendes:

System.import('../build/solar-popup.js').then(function() { 
    System.import('SolarPopup').then(function(SolarPopup) { 
     console.dir(SolarPopup); 
    }); 
});