Typescript с AMD и require.js

Я использую Typescript с AMD и require.js, но я не могу заставить компилятор 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"], ...

В настоящее время мне понадобится третий script, написанный на JavaScript, просто для загрузки модуля main, и я считаю, что этот плохой стиль имеет модуль main как многоразовый код.

Как я могу заставить компилятор Typescript выводить main.ts в качестве исполняемого определения вместо определения модуля?

Ответ 1

Function define определяет только модуль, он никогда не выполнит модуль независимо от того, как код генерируется TypeScript.

После того, как все модули были определены, вы должны выполнить скрипт, который должен содержать инструкцию, вызывающую метод require.


So after your script has been loaded, you have have a script which should not be in AMD format, it should simply contain following statement...

'''javascript
require(['main'], function (main) {
   // your main has been loaded !!!
});

Typescript не будет генерировать такое утверждение, поскольку предполагается, что все модули в формате AMD. Однако запуск и выполнение модуля является функцией загрузчика AMD, и вызывающий абонент должен вручную вызвать и вызвать модуль.

Ответ 2

Когда вы используете "импорт...", TypeScript будет компилировать модули AMD, как показано в вашем вопросе. Не могли бы вы попробовать следующий код (также проверить этот учебник), чтобы проверить, приводит ли он к выводу, который вы запрашиваете?

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

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

        // YOUR CODE HERE
    }
);