SystemJS: Warum bekomme ich Fehler jquery_1.default ist keine Funktion beim Importieren von jquery

Question

Ich habe Foundation über Jspm installieren Foundation installiert, dann importieren Foundation und jquery.

Das Problem, das ich habe, ist, dass, wenn ich jquery über import $ as 'jquery' importieren, bekomme ich den Fehler jquery_1.default ist keine Funktion. Wenn ich jquery über import * as $ from jquery importiere, funktioniert es wie erwartet

Ich rufe $(document).foundation(); an, um Fundamente Javascript-Bestandteile zu initialisieren. Unten ist mein 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(); 
     }); 
} 

Der Rest des Codes ist nur Standardnavigation auf eine einfache Seite, die

Hinweis ein Fundament Navigationsleiste mit Drop-Down-Liste enthält: Ich hatte auch jquery explizit zu installieren, auch wenn jquery ist als dep aufgelistet.

Ich habe den ursprünglichen Override für Foundation 6 gemacht, hat eindeutig etwas falsch gemacht, aber es schien zu der Zeit zu arbeiten. Jedoch habe ich seither herausgefunden, dass wenn Bootstrap installiert wurde, es jquery in github: components einbaute und das schien es so zu machen, dass jquery nicht explizit installiert werden musste. Zu dieser Zeit schien alles in Ordnung zu sein.

nur zu reproduzieren das aurelia Skelett verwenden und eine Seite mit einem Fundament Steuerelement hinzufügen, Hinzufügen der $ (document) .foundation(), wie oben

Answer 1

Wenn Sie Typoskript Set module = System in Ihrem TSconfig verwenden:

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

Answer 2

Ich glaube, das ist ein Problem mit Typoskript. Von dem, was ich sagen kann, respektiert es nicht die Importanweisung im es6-Stil für Legacy-Code, dh Code, der keinen Export hat. Wenn Sie den alten Stil var $ = require ('jquery') verwenden, funktioniert es.

Die Fehlerbehebung dafür ist die Verwendung der --allowSyntheticDefaultImports Flag auf True.

Der erste Link am Ende der das Typoskript Ausgabe dieses

Sehen Sie diese Diskussionen für weitere Einzelheiten

SystemJS and default import with export = proposal

Importing defaults with es6 syntax doesn't work

Can't find proper default variable export syntax