Question

我遇到game.ts文件编译的game.js代码问题：

var GameObjects = require("./GameObjects")

我设置了我的页面index.html js imports，因为：

<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>

这是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

任何想法的朋友？

Answer 1

我不确定手动编辑JavaScript文件的想法来自哪里。如果使用--module amd标志编译TypeScript，则不需要编辑JavaScript文件，因为import语句将转换为require语句。

您页面上唯一需要的脚本标记是：

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

一旦require.js加载，它就会加载game.js，每当遇到require语句（这是你的TypeScript文件中的import语句）时，它就会加载脚本然后执行代码。

只需在TypeScript文件中添加import语句，即可加载jQuery和GameObjects以及任何其他模块。

Answer 2

您的require.js data-main标记中没有script属性。请仔细阅读the RequireJS documentation。

简而言之：您应该从顶级ts/GameObjects.js调用加载require，该调用放在data-main属性中指定的文件中。例如（来自文档）：

<!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>

然后在javascripts/main.js（您实际上可以随意调用它，只要它与您放在data-main中的内容相匹配），您调用require并加载模块并执行任何操作你想要他们：

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

请记住，在ts/GameObjects.js和ts/game.js中，您需要将代码包装在define()次调用中，因此它们会被解释为模块。

希望有所帮助。

TypeScript requirejs加载外部模块的问题

2 个答案: