Как использовать огромную библиотеку машинописного текста, не загрязняя HTML?

Этот ответ предлагает вручную добавить ссылку на .js файлы, созданные всеми используемыми .ts файлы.

Я намерен использовать библиотеку со сложной структурой. Я уже добавил топ-файлы в мой html, но у них есть вложенные ссылки, которые имеют вложенные ссылки и т. Д.

Если app.ts начинается с

/// <reference path="yendor/src/yendor/yendor.ts" />
/// <reference path="yendor/src/umbra/umbra.ts" />
/// <reference path="yendor/src/gizmo/gizmo.ts" />
/// <reference path="yendor/src/game/base.ts" />
/// <reference path="yendor/src/game/persistence.ts" />
/// <reference path="yendor/src/game/custom_events.ts" />
/// <reference path="yendor/src/game/actor.ts" />
/// <reference path="yendor/src/game/effects.ts" />
/// <reference path="yendor/src/game/item.ts" />
/// <reference path="yendor/src/game/creature.ts" />
/// <reference path="yendor/src/game/map.ts" />
/// <reference path="yendor/src/game/gui.ts" />
/// <reference path="yendor/src/game/engine.ts" />

Могу ли я оставить только

<script src="app.js"></script>

Вместо

Whatever else is used by other libraies
<script src="yendor/src/yendor/yendor.js"></script>
<script src="yendor/src/umbra/umbra.js"></script>
<script src="yendor/src/gizmo/gizmo.js"></script>
<script src="yendor/src/game/base.js"></script>
<script src="yendor/src/game/persistence.js"></script>
<script src="yendor/src/game/custom_evenjs.js"></script>
<script src="yendor/src/game/actor.js"></script>
<script src="yendor/src/game/effecjs.js"></script>
<script src="yendor/src/game/item.js"></script>
<script src="yendor/src/game/creature.js"></script>
<script src="yendor/src/game/map.js"></script>
<script src="yendor/src/game/gui.js"></script>
<script src="yendor/src/game/engine.js"></script>
<script src="jquery-1.11.1.min.js"></script>
<script src="pixi.min.js"></script>
<script src="app.js"></script>

внутри index.html?

Я использую Visual Studio 2015, чтобы построить это.

Источник

2 ответа

Решение

Вариант, предложенный Мигелем Латтуада, работал с определенной библиотекой (yendor.ts), несмотря на то, что он использовал пространства имен.

в Visual Studio 2015:

1) Открыть настройки проекта

2) Перейти на вкладку сборки TypeScript

3) Установите "Модуль системы" на "Нет"

4) Пометить "Вывод"->"Объединить вывод JavaScript в файл"

5) Укажите абсолютный путь к вашему приложению с суффиксом combined.js Например, C:\Users\admin\Google Drive\My App\Client\Client\combined.js

6) Добавить ссылку на combined.js в ваш HTML-файл.

Источник

Вы можете сделать это:

  1. Организуйте свой код, используя машинописные модули
  2. Используйте загрузчик модулей (systemjs или тому подобное) для автоматической загрузки модулей

Следуя этим двум правилам, ваш index.html будет выглядеть примерно так:

<!doctype html>
<html>
<head>
    <script src="lib/systemjs/dist/system-polyfills.src.js"></script>
    <script src="lib/systemjs/dist/system.src.js"></script>

    <script>
        System.defaultJSExtensions = true;
    </script>
</head>
<body>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) 
        {//Entry point of the application.
            System.import('app').catch(function(e)
            {
                console.error(e);
            });
        });
    </script>
</body>
</html>

Без необходимости включать каждый файл.

Источник
Другие вопросы по тегам