Как запустить приложение TypeScript, скомпилированное в один файл с модулями AMD?

Я уверен, что упускаю что-то совершенно тривиальное здесь, но для жизни я не могу понять это. Только недавно я начал использовать AMD (RequireJS). Мое приложение будет (будет) работать в браузерах.

настройка

в TypeScript 1.8 это возможно to tsc весь проект, состоящий из внешних модулей в один выходной файл при использовании AMD.

по этой причине, я, наконец, решил оставить внутренние модули позади и делают весь мой проект VS2015 .ts и .tsx файлы внешние модули, а затем скомпилировать их в один файл со следующими параметрами компилятора:

--module AMD --outFile main.js

выход

на один выход главные.JS файл создается как ожидалось, в нем перечислены все модули, которые являются частью проекта:

main.js

define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
    "use strict";
    console.log("MainModule defined");
    // ...
});

...

использование (?)

теперь, как мне получить Project/MainModule для запуска из -- например -- index.html (так что он регистрирует "MainModule определенными" в консоли)? У меня RequireJS загружен для обработки синтаксиса AMD, а также основного.файл js, указанный для немедленной загрузки:

.HTML-код

<script data-main="main" src="Require.js"></script>

это правильно загружает main.js, который я обеспечил, включив вызов console.log после огромного списка определяет в этом файле (внешние модули). Извините, если это тривиально вопрос, я не мог найти ничего относительно того, как использовать скомпилированное приложение с таким подходом (возможно, я не использовал правильный ключевые слова?).

Edit: я попытался потребовать модуль по его имени:

.HTML-код

<script>
    window.onload = function () {
        require(["Project/MainModule"], function () {
            // this
        });
    }
</script>

... но это нехорошо, RequireJS не может найти модуль.

11
amd typescript

3 ответов

вы должны загружать встроенный файл через тег скрипта:

<head>
    <script src="bower_components/dojo/dojo.js"></script>
    <script src="built/run.js"></script>
</head>

затем вы можете загрузить модули, используя require:

<body>
    <script>require(["app"], run => run());</script>
</body>

в tsconfig.в JSON:

{
    "compilerOptions": {
        "declaration": false,
        "module": "amd",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false,
        "out": "./built/run.js",
        "moduleResolution": "node"
    },
    "exclude": [
        "bower_components"
    ]
}

посмотреть https://github.com/ca0v/ags-lab/blob/master/index.html рабочий пример.

кроме того, вы можете использовать data-main для загрузки конфигурации requirejs. Эта конфигурация может указать встроенный скрипт как зависимость. Для пример:

requirejs.config({
    paths: {
        "openlayers": "bower_components/ol3/ol",
        "jquery": "bower_components/jquery/dist/jquery.min"
    },
    deps: ["built/run"],
    callback: () => {
        requirejs(["app"], run => run());
    }
});

и загрузите это с помощью data-main:

<head>
    <script src="bower_components/requirejs/require.js" data-main="config.js"></script>
</head>

см.https://github.com/ca0v/ol3-lab/blob/master/index.html

5

компилятор TypeScript производит только define звонки. Для запуска загрузки модуля вам нужен хотя бы один верхний уровень require звонок.

при использовании RequireJS r.js для связывания есть хороший опции по этому поводу.

Не уверен, как использовать --outFile для достижения этой цели. Я считаю, что вам нужно будет использовать RequireJS API непосредственно в .ts или .js аналогичным образом вы сделали в своем .HTML-код. Звоню просто require(["Project/MainModule"]); должно быть достаточно.

это причина, по которой вы не хотите или не можете использовать решение с Р.Яш, browserify или webpack?

2

это действительно была тривиальная ошибка - для продвинутых пользователей RequireJS.

определения модулей, созданные при компиляции с синтаксисом AMD и --outFile названы модули согласно RequireJS.

чтобы использовать именованный модуль, он должен быть определен в конфигурации RequireJS путем сопоставления имени модуля с путем модуля. В этом случае нам нужно определить, что именованный модуль Project/MainModule в модуль (файл) main:

.HTML-код

<script>
    require.config({
        paths: {
            "Project/MainModule": "main"
        }
    });
</script>

а затем потребовать модуль по его имени, который теперь можно посмотреть из файла, назначенного ему:

.HTML-код

<script>
    require(["Project/MainModule"], function () {
        console.log("app loaded");
    });
</script>

Примечание: the

1