Verwenden von SystemJS/jspm zum Laden von Async, es5-Module in der Produktion

Question

Ich möchte Abhängigkeiten mithilfe von System.import() asynchron laden können, ohne ES6 während der Produktionslaufzeit auf ES5 umstellen zu müssen. Ich möchte, dass diese Module in separate ES5-Module transpiliert werden, die nur bei Bedarf abgerufen werden. Ich möchte nicht, dass sie Teil des Hauptpakets sind.

Dev Workflow-

Die Module effektiv sind während meiner Produktion bauen Laden, die tatsächlich besorgniserregend ist, weil ich will keine Abhängigkeiten enthalten, die für transpilation ermöglichen.

Ich habe einen Workflow, in dem ich jspm bundle und jspm unbundle verwende, um zwischen Entwicklungs- und Produktionskonfigurationen umzuschalten. In meiner Entwicklungsumgebung, bin auch ich die folgenden Skripte:

<script src="jspm_packages/system.js"></script> 
<script src="config.js"></script> 

<script> 
    System.import('src/main'); 
</script> 

Production Workflow

In der Produktion verwende ich jspm bundle --inject die bundles Option in System.config zu injizieren. Diese effektiv lädt nur die benötigten Dateien:

system.js 
config.js 
main.bundle.js 

Wenn ich versuche, asynchron ein Modul zu laden, mit System.import() während der Produktion, lädt es in Ordnung, was bedeutet, dass transpilation im Browser während der Produktion geschieht.

---

Fragen

1. ich jedem meiner Module in AMD leicht aufbauen können, aber wie kann ich asynchron noch und separat holen sie System.import() mit?

2. Ich möchte auch sicherstellen, dass so wenig Browser Overhead wie möglich, was bedeutet, dass keine Skripte, die transpilation durchführen. Gibt es eine Möglichkeit, system.js einzuschließen, die nicht transpile Fähigkeiten haben?

Answer 1

Antwort 1

System.import() ist für das Laden der Module verwendet. Module sind essentielle .js-Dateien, die etwas wie eine Funktion oder ein Objekt oder eine Klasse exportieren.

Wenn Sie Ihren Code in separate Dateien organisieren, dann können Sie sie in den Kopf einer anderen Datei entweder laden mit ..

import * as YM from 'YourModuleFile'; 

würde dies YM in der gesamten Datei zugänglich machen.

Oder wenn Sie YM auf eine Schaltfläche geladen werden sollen, statt klicken ..

element.onclick = function() { 
    System.import('YourModuleFile').then(function(YM) { 
     // YM accessible here 
    }) 
} 

Also das Wichtigste ist, wird der Code auch in den Dateien/Module zu organisieren.

Sie dann vielleicht eine npm Aufgabe Läufer wie schluck verwenden, um die Dateien zu komprimieren, usw.

Natürlich müssen Sie einige Zuordnungen in Ihrem systemjs.config.js solche Datei eingeben, wie ..

'YourModuleFile': '/path/to/your/module/file.js' 

So dass SystemJS es finden kann.

Antwort 2

JSPM hat tranpile Fähigkeiten, ich bin nicht sicher, SystemJS nicht.

Stellen Sie sicher, dass JSPM (oder Ihr Tool der Wahl) Ihre Dateien transpiliert. Zeigen Sie dann SystemJS auf die transpilierten Dateien.