Użycie SystemJS/jspm do załadowania modułów async, es5 w produkcji

Question

Chcę móc asynchronicznie ładować zależności za pomocą System.import(), ale bez konieczności transpozycji ES6 do ES5 podczas środowiska produkcyjnego. Chcę, aby moduły te były transponowane do oddzielnych modułów ES5, które są pobierane tylko wtedy, gdy są potrzebne. Nie chcę, żeby były częścią głównego pakietu.

Dev Workflow

Moduły są skuteczne ładowanie podczas mojego kompilacji produkcyjnej, która jest rzeczywiście niepokojące, bo nie chcą zawierać żadnych zależności, które pozwalają na transpilation.

Mam przepływ pracy, w którym używam jspm bundle i jspm unbundle do przełączania się między konfiguracjami programistycznymi i produkcyjnymi. W moim środowisku programistycznym, jestem w tym następujące scenariusze:

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

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

Workflow Produkcja

w produkcji używam jspm bundle --inject wstrzyknąć opcję bundles do System.config. To skutecznie ładuje tylko niezbędne pliki:

system.js 
config.js 
main.bundle.js 

Kiedy próbuję załadować moduł asynchronicznie z System.import() podczas produkcji, ładuje grzywny, co oznacza, że ​​transpilation dzieje się w przeglądarce w trakcie produkcji.

---

Pytania

1. mogę łatwo zbudować każdy z moich modułów na AMD, ale jak mogę nadal asynchronicznie i osobno pobierać je za pomocą System.import()?

2. Chcę również, aby upewnić się to tak mało napowietrznych przeglądarki jako możliwe, co nie oznacza w tym żadnych skryptów, które wykonują transpilation. Czy istnieje sposób, aby włączyć system.js, który nie ma możliwości transpozycji?

Answer 1

odpowiedź 1

System.import() jest używana do ładowania modułów. Moduły są niezbędnymi plikami .js, które eksportują coś takiego jak funkcja, obiekt lub klasa.

Jeśli zorganizować swój kod w osobnych plikach następnie można załadować je albo w głowę innego pliku przy użyciu ..

import * as YM from 'YourModuleFile'; 

to uczyniłoby YM dostępny w całym pliku.

Albo jeśli chcesz YM ładowane na przycisku kliknij zamiast ..

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

Dlatego ważne staje się organizowanie kodu oraz wewnątrz plików/modułów.

wtedy może użyć zadania zawodnik npm takich jak haustem do kompresji plików, itp

Oczywiście, trzeba będzie wprowadzić pewne odwzorowania wewnątrz pliku twoi systemjs.config.js takie jak ..

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

Dzięki temu SystemJS może go znaleźć.

Odpowiedź 2

JSPM ma możliwości tranpile, nie jestem pewien SystemJS ma.

Upewnij się, że JSPM (lub wybrane narzędzie) przenosi Twoje pliki. Następnie skieruj SystemJS do transpiled plików.