javascript - TypeScript requirejs problem med indlæsning af eksterne moduler

Jeg har problemer med dette game.js-kode, som game.ts-filen kompilerer til:

var GameObjects = require("./GameObjects")

Jeg har opsat min side index.html js-imports således:

<script language="javascript" src="javascripts/require.js" type="text/javascript"> </script>
<script language="javascript" src="javascripts/jquery-1.8.2.min.js" type="text/javascript"> </script>
<script language="javascript" src="ts/GameObjects.js" type="text/javascript"> </script>
<script language="javascript" src="ts/game.js" type="text/javascript"> </script>

og dette er fejlen i Chrome:

Uncaught ReferenceError: exports is not defined GameObjects.js:82
Uncaught Error: Module name "GameObjects" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded

nogle idéer venner?

Svar #1

Jeg er ikke sikker på, hvor idéen om manuelt at redigere JavaScript-filerne kommer fra. Hvis du kompilerer din TypeScript med --module amd-flaget, burde du ikke have brug for at redigere JavaScript-filerne, da import-sætningerne vil blive konverteret til require-sætninger.

Den eneste script-tag, du burde have på din side, er denne:

<script src="javascripts/require.js" data-main="ts/game.js"></script>

Når require.js er indlæst, vil det derefter indlæse game.js, og hver gang det støder på en require-erklæring (som er din import-erklæring i din TypeScript-fil), vil det derefter indlæse det script og derefter udføre koden.

Du kan indlæse jQuery og GameObjects og andre moduler blot ved at tilføje import-erklæringer i din TypeScript-fil.

Svar #2

Du har ingen data-main-attribut i dit require.js script-tag. Læs venligst RequireJS-dokumentationen omhyggeligt.

I en nøddeskal: du bør indlæse ts/GameObjects.js fra et topniveau require-kald, som du placerer i filen, der er angivet i data-main-attributten. f.eks. (fra dokumentationen):

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             javascripts/main.js after require.js loads. -->
        <script data-main="javascripts/main" src="javascripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

Så i javascripts/main.js (du kan faktisk kalde det, hvad du vil, så længe det matcher det, du satte i data-main), kalder du require og indlæser dine moduler og gør, hvad du vil med dem:

require(["ts/GameObjects.js", "ts/game.js"], function(GameObjects, Game) {
  ... use 'GameObjects' and 'Game' here ...
});

Husk, at i ts/GameObjects.js og ts/game.js skal du pakke din kode ind i define()-kald, så de bliver fortolket som moduler.

Håber det hjælper.

Relaterede artikler