SystemJS: Dlaczego otrzymuję komunikat o błędzie jquery_1.default nie jest funkcją podczas importowania jquery

Question

Zainstalowałem podłoże za pomocą jspm install foundation, a następnie zaimportuję podstawę i jquery.

Problem polega na tym, że jeśli importuję jquery przez import $ as 'jquery', pojawia się błąd jquery_1.default nie jest funkcją. Jeśli importuję jquery przez import * as $ from jquery działa zgodnie z oczekiwaniami

Dzwonię pod numer $(document).foundation();, aby zainicjować składniki javascript. Poniżej jest moje main.ts

import 'foundation' 
import $ from 'jquery'; 
import {Aurelia} from 'aurelia-framework'; 

export function configure(aurelia: Aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging();  

    aurelia.start().then(a => a.setRoot()) 
     .then(a => { 
     // Initialize framework 
     $(document).foundation(); 
     }); 
} 

Reszta kodu jest tylko domyślna nawigacja do prostej strony zawierającej bar fundacja nav z listy rozwijanej

Uwaga: Miałem też jawnie zainstalować jQuery chociaż jquery jest wymienione jako dep.

Zrobiłem oryginalne zastąpienie dla fundacji 6, najwyraźniej zrobiłem coś źle, ale wydawało się, że działa w tym czasie. Jednak od tego czasu dowiedziałem się, że po zainstalowaniu programu bootstrap wstawił on jquery do github: components i wydawało się, że tak jquery nie musiał być jawnie instalowany. W tym czasie wszystko wydawało się w porządku.

Do odtworzenia wystarczy użyć szkielet Aurelia i dodać stronę z kontrolą fundamentowej, dodając $ (document) .foundation() jak wyżej

Answer 1

Jeśli używasz zestaw maszynopis moduł = System w swojej tsconfig:

{ 
    "compilerOptions": { 
    "module": "system", 
    "target": "es6", 
    "sourceMap": true, 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "jspm_packages" 
    ] 
} 

Answer 2

Uważam, że jest to problem z maszynopisem. Z tego co wiem, nie respektuje instrukcji importowej w stylu es6 dla starszego kodu, tj. Kodu, który nie ma eksportu. Jeśli używasz starego stylu var $ = require ('jquery'), to działa.

Rozwiązaniem problemu jest użycie flagi --allowSyntheticDefaultImports do wartości true.

Pierwszy link na dole tej kwestii maszynopisie opisuje to naprawić

Zobacz te dyskusje na dokładniej

SystemJS and default import with export = proposal

Importing defaults with es6 syntax doesn't work

Can't find proper default variable export syntax