带有AMD和require.js的打字稿

Question

我正在使用带有AMD和require.js的Typescript,但我无法使用typescript编译器输出将在加载模块后执行的代码.

这是main.ts:

import { foo } from './bar';

foo('world');

这是bar.ts:

export function foo(name: string) {
  alert('Hello ' + name);
}

我使用以下tsconfig.json文件编译它:

{
    "compilerOptions": {
        "alwaysStrict": true,
        "module": "amd",
        "outFile": "client.js",
        "target": "es5"
    },
    "files": [
        "main.ts"
    ]
}

并将其包含在我的HTML中,如下所示:

<script data-main="client/client.js" src="/static/require.js"></script>

但是,生成的JavaScript代码如下所示:

define("bar", ["require", "exports"], function (require, exports) {
    "use strict";
    function foo(name) {
        alert('Hello ' + name);
    }
    exports.foo = foo;
});
define("main", ["require", "exports", "bar"], function (require, exports, bar) {
    "use strict";
    bar.foo('world');
});

一切都很好,除了我想main直接在模块中执行代码的事实.所以最后的定义应该是

define(["require", "exports", "bar"], ...

代替

define("main", ["require", "exports", "bar"], ...

目前,我需要用JavaScript编写的第三个脚本来加载main模块,我认为将main模块作为可重用代码是不好的风格.

如何将typescript编译器main.ts作为可执行定义而不是模块定义输出？

Answer 1

当您使用“导入...”时，TypeScript 将编译 AMD 模块，如您的问题中所示。您可以尝试以下代码（另请参阅本教程）来验证它是否会产生您要求的输出吗？

/// <reference path="[YOUR IMPORT FILE]" />
/// ...

/**
 * Main entry point for RequireJS
 */
require(
    [
        // YOUR IMPORT DEFINITIONS
    ],
    (/* YOUR IMPORT VARIABLES */) => {
        'use strict';

        // YOUR CODE HERE
    }
);