TypeScript outFile не работает должным образом через Requirejs - PullRequest
Новая
       7

TypeScript outFile не работает должным образом через Requirejs

0 голосов
/ 10 февраля 2020

В настоящее время я пытаюсь настроить и изучить TypeScript, и у меня возникают проблемы с тем, чтобы модули работали в нормальном режиме.

Контекст

У меня есть два файла ts, main.ts и types.ts. main.ts - это моя единственная точка входа, а types.ts - это просто тестовый файл с парой интерфейсов. У меня также есть файл tsconfig.json, который определяет, помимо прочего, цель (ES6), модуль (AMD) и outFile.

Моя цель - иметь возможность выгрузить весь мой проект в один JavaScript файл вместо необходимости добавлять целую кучу тегов сценария в мой html. 

// types.ts
export interface Time {
    unix: number;
}

// main.ts
import {Time} from "types";
document.addEventListener("DOMContentLoaded", () => {
    let x: Time = { unix: 12345 };
    alert(x.unix);
});

<!-- index.html -->
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="static/styles/styles.css" />
    <script data-main="static/scripts/timeapp" src="static/scripts/require.js" async></script>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Проблема

Когда tsc компилирует мой проект в один файл, потому что мой main.ts файл имеет импорт (потому что, конечно, он это делает), он также классифицируется как модуль. Это, очевидно, заставляет require.js ничего не делать. Ни один из моего кода не выполняется. Нет ошибок, нет вывода, вообще ничего. Оба моих файла оказались в блоках define, и я действительно не знаю, что делать. 

define("types", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
});
define("main", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    document.addEventListener("DOMContentLoaded", () => {
        let x = {
            unix: 12345
        };
        alert(x.unix);
    });
});
//# sourceMappingURL=time.js.map

Я считаю довольно неразумным, что при импорте верхнего уровня файл классифицируется как модуль. Экспорт конечно, но импорт сам по себе, что не имеет смысла для меня. Может быть, кто-то может уточнить это тоже?

1 Ответ

0 голосов
/ 10 февраля 2020

Хорошо, я наконец понял это, и я немного злющий. Ни в коем случае не требуется js 'веб-сайт или что-либо, что я читал на SO, в блогах и т. Д. c кто-нибудь четко объяснил, как это работает.

Во-первых, рекомендуемый метод совершенно бесполезен, поскольку Благодаря асинхронизации невозможно получить какие-либо гарантии относительно того, какие файлы загружены, а событие DOMContentLoaded запускается только один раз, поэтому, если один из ваших файлов загружается с небольшим опозданием, и вы полагаетесь на эту гарантию, ваш код просто никогда не будет выполнен. Итак, вот как вы используете эту вещь:

  1. Скомпилируйте ваш ts-код в один js файл, полный определений.
  2. Создайте небольшой js файл, который используется в качестве точки входа для вашей ... точки входа.
  3. Загружайте файлы js синхронно в html, несмотря на все прочитанное, говорящее, что это неверный путь. 
// app.js
define("types", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
});
define("app", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    let x = {
        unix: 12345
    };
    alert(x.unix);
});
//# sourceMappingURL=app.js.map

// main.js
document.addEventListener("DOMContentLoaded", () => {
    require(["app"], () => {});
});

<!-- index.html -->
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="static/styles/styles.css" />
    <script src="static/scripts/require.js"></script>
    <script src="static/scripts/app.js"></script>
    <script src="static/scripts/main.js"></script>
</head>
<body></body>

Если кто-то может дать мне лучший ответ, я весь слух.

...