Utilizzo di SystemJS/jspm per caricare asincrono, es5 moduli in produzione

Question

Desidero poter caricare in modo asincrono le dipendenze utilizzando System.import(), ma senza dover transpedere da ES6 a ES5 durante il runtime di produzione. Voglio che questi moduli vengano traspellati in moduli ES5 separati che vengono recuperati solo quando necessario. Non voglio che facciano parte del pacchetto principale.

Dev Workflow

I moduli vengono caricati in modo efficace durante la mia generazione la produzione che in realtà è preoccupante perché non voglio includere eventuali dipendenze che permettono transpilation.

Ho un flusso di lavoro in cui sto usando jspm bundle e jspm unbundle per passare tra le configurazioni di sviluppo e di produzione. Nel mio ambiente di sviluppo, sto tra cui i seguenti script:

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

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

Production Workflow

Nella produzione, sto usando jspm bundle --inject per iniettare l'opzione bundles in System.config. Questo carica in modo efficace solo i file necessari:

system.js 
config.js 
main.bundle.js 

Quando provo a caricare un modulo in modo asincrono con System.import() durante la produzione, carica bene, il che significa che transpilation sta accadendo nel browser durante la produzione.

---

Domande

1. Posso facilmente costruire ciascuno dei miei moduli in AMD, ma come posso ancora in modo asincrono e separatamente scaricarli usando System.import()?

2. voglio anche fare in modo di includere il meno spese generali browser come possibile, il che significa non comprese le eventuali script che eseguono transpilation. C'è un modo per includere system.js che non ha capacità di transpile?

Answer 1

Risposta 1

System.import() viene utilizzato per il caricamento dei moduli. I moduli sono file .js essenziali che esportano qualcosa come una funzione o un oggetto o una classe.

Se organizzare il codice in file separati, allora si possono caricare sia nella testa di un altro file utilizzando ..

import * as YM from 'YourModuleFile'; 

questo renderebbe YM accessibile l'intero file.

Oppure, se volete YM caricato su un pulsante di cliccare invece ..

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

Quindi la cosa importante diventa l'organizzazione del codice ben dentro file/moduli.

È quindi possibile utilizzare un compito corridore NPM come sorso per comprimere i file, ecc

Naturalmente, è necessario inserire alcuni mappature all'interno del file delle systemjs.config.js come ..

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

In modo che SystemJS possa trovarlo.

Risposta 2

JSPM ha capacità tranpile, non sono sicuro SystemJS fa.

Assicurarsi che JSPM (o lo strumento di scelta) traspuri i file. Quindi indirizzare SystemJS ai file transpiled.