2017-02-05 20 views
5

Niedawno uczyłem się używać system.js do importowania modułów, które zostały skompilowane za pomocą maszynopisu. Moduły zostały wcześniej skompilowane dla require.js i działają dobrze.Błąd importu Moduły skompilowane w języku maszynowym za pomocą System.js

Jednak podczas łączenia z system.js moduły nie mogą zostać zaimportowane po zastosowaniu system-production.js. Konsola mówi:

Uncaught (in promise) Error: Module instantiation did not call an anonymous or correctly named System.register. 
    Instantiating https://www.star.com/libs/js/klondike.js 
    Loading ./libs/js/klondike.js 
    at register-loader.js:203 
t   @ common.js:83 
(anonymous) @ loader-polyfill.js:70 

Nie bardzo rozumiem, co powoduje komunikat o błędzie. A kiedy aplikuję system.src.js, nie pojawi się komunikat o błędzie, ale nie mogę korzystać z funkcji w importowanych modułach. Każde połączenie zostanie zwrócone niezdefiniowane. Czy działałem w niewłaściwy sposób?

Poniżej znajduje się kod źródłowy.

test.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
</body> 

<!-- sys import --> 
<script src="libs/js/system-production.js"></script> 

<!--<script src="libs/js/system.src.js"></script>--> 

<script> 
    System.import("./libs/js/klondike.js"); 
</script> 

</html> 

tsconfig.json

{ 
    "compilerOptions": { 
    "module": "System", 
    "outFile": "../../js/klondike.js", 
    "target": "es5", 
    "sourceMap": true, 
    "removeComments": true 
    }, 
    "include": [ 
    "./*" 
    ] 
} 

głównego modułu: CardMoves.ts

//sys import 
import * as DBJSN from "./debugJson"; 
import PokerCard from "./Cards"; 

let suits: string[] = ["spade", "heart", "club", "diamond"]; 
let cards: string[] = [, "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; 

//sys export 
export function createDeck() { 
    let playCards: PokerCard[] = new Array(DBJSN.settings.decks*52); 

    console.log(playCards); 

    for (let i=0; i<playCards.length; i++) { 
     playCards[i] = new PokerCard(); 
     playCards[i].suit = suits[Math.floor(i % 52/13)]; 
     playCards[i].card = i % 52 % 13 + 1; 
    } 

    return playCards; 
} 

Dependency1: Cards.ts

//sys export 
export default class PokerCard { 
    private _suit: string; 
    private _card: number; 

    constructor() {} 

    //Suit getter and setter 
    get suit(): string { 
     return this._suit; 
    } 

    set suit(newSuit: string) { 
     try { 
      if (this._suit === undefined) 
       this._suit = newSuit; 
      else 
       throw "Suit value has been set."; 
     } 
     catch(e) { 
      console.log(e); 
     } 
    } 

    //Card getter and setter 
    get card(): number { 
     return this._card; 
    } 

    set card(newCard: number) { 
     try { 
      if (this._card === undefined) 
       this._card = newCard; 
      else 
       throw "Card value has been set."; 
     } 
     catch(e) { 
      console.log(e); 
     } 
    } 
} 

Dependency2: debugJson.ts

//sys export 
export let settings = { 
    decks: 1, 
    cardsPerClick: 1, 
    timer: true 
}; 

Odpowiedz

2

miałem ten sam problem. Problem polegał na tym, że próbowałem użyć pakietu jako zwykłego modułu. Zgodnie z pakietem dokumentacji powinien mieć kilka wywołań System.register. Następnie musisz dodać ten pakiet za pomocą znacznika script jako zwykłego pliku js. A następnie wywołaj swój moduł punktu początkowego (createDeck w twoim przypadku zakładam).

Aby uzyskać więcej informacji, należy wykonać numer https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md.

Mam nadzieję, że to pomoże!

+0

Czy ten problem został rozwiązany? Mam dokładnie ten sam problem. Dokumentacja jest bardzo niejasna, jeśli chodzi o używanie plików js, które zostały dołączone do zestawu za pomocą kompilatora Typescript. – Kokodoko

+0

W tym pakiecie za pomocą znacznika skryptu zrobiłem dla mnie. –