如何使用需要JS与TypeScript捆绑输出

时间:2016-03-16 00:54:59

标签: typescript requirejs

我正在使用--outFile build.js -m amd和TypeScript。这给了我一个充满define语句的好文件。

现在,我如何在浏览器中加载和使用带有requirejs的模块?

我的测试文件如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.22.0.css">
  <script src="http://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script type="text/javascript" data-main="../build" src="../lib/require.js"></script>
  <script type="text/javascript" src="player.js"></script>
</body>
</html>

我正在加载requirejs,它正在加载构建文件。这包括define语句中的所有模块,如:

define("player", ["require", "exports"], function (require, exports) {
    "use strict";
    var defaultAge = 0;
    var Player = {
        get name() {
            return "Ronald";
        },
        get age() {
            return defaultAge + 3;
        }
    };
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = Player;
});

然后在test.js我尝试使用它们:

require(['player'], function(player){

    QUnit.test("Player name", function(assert) {
      assert.equal(Player.name, "Ronald", "Players name is set.");
    })

    QUnit.test("Player age", function(assert) {
        assert.equal(Player.age, 8, "Players age is set.");
    });   
})

但是这会引发错误,因为requirejs试图加载一些player.js - 我希望它使用已定义的播放器模块。

1 个答案:

答案 0 :(得分:2)

  

作为requirejs试图加载一些player.js

如果代码define("player", ["require", "exports"]没有在当前上下文中执行,那么会发生。 R.js应该订购代码以确保define发生在require之前。

那说你不应该自己编写这些define / require语句。如果您使用TypeScript modules ,则可以编译为amd:https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

更多

RequireJS old 。请查看webpack:https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html