TypeScript requirejs 加载外部模块的问题答案

【问题标题】：TypeScript requirejs issue with loading external modulesTypeScript requirejs 加载外部模块的问题
【发布时间】：2012-12-01 21:54:08
【问题描述】：

我在使用 game.ts 文件编译成的 game.js 代码时遇到问题：

var GameObjects = require("./GameObjects")

我已经将我的页面 index.html js 导入设置为：

<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

朋友们有什么想法吗？

【问题讨论】：

标签： javascript requirejs typescript

【解决方案1】：

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

简而言之：您应该从顶级require 调用加载ts/GameObjects.js，您将其放入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 编译器生成的 js 文件的情况下解决？
你的意思是“ts/GameObjects.js”和“ts/game.js”？如果是这样，那么不，没有，你绝对需要那里的define 电话。
所以每次编译我的 ts 文件我都必须手动编辑 js 文件？如果是这样，我不会打扰外部模块:(我将如何修改以下输出的 .js 文件？
(function (GameObjects) { var Player = (function () { function Player() { this.color = "#00A"; this.x = 50; this.y = 270; this.宽度 = 20; this.height = 30; }
您为什么不直接阅读RequireJS documentation？这就是它的用途。无论如何，您发布的函数有语法错误，没有足够的右括号。

【解决方案2】：

我不确定手动编辑 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 以及任何其他模块。

【讨论】：

thx +1，如果我的解决方案只有 1 个项目，那么最好的重播方法是什么，我在项目菜单中看不到该选项 :(
像这样：
是的——尽管--target ES5 属于&quot; 之前（如果你真的想针对ES5）。
hmm 现在 VS 构建成功，但新的 JS 文件没有更新，我恢复了新的参数，仍然是同样的问题。 VS 2012 确实需要改进 typescript 的东西
用这个修复它：