Question

This回复建议手动添加对所有已使用的.js文件生成的.ts文件的引用。

我打算使用具有复杂结构的library。我已将顶级文件添加到我的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来构建它。

Answer 1

你可以通过以下方式做到：

使用typescript modules
使用模块加载程序（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>

无需包含每个文件。

Answer 2

Miguel Lattuada建议的选项，使用特定的库（yendor.ts），尽管它使用名称空间。

Visual Studio 2015中的

：

1）打开项目设置

2）转到TypeScript构建选项卡

3）设置＆＃34;模块系统＆＃34;到＆＃34;无＆＃34;

4）标记＆＃34;输出＆＃34; - ＆gt;＆＃34;将JavaScript输出合并到文件＆＃34;

5）指定以combined.js为后缀的应用的绝对路径，例如C:\Users\admin\Google Drive\My App\Client\Client\combined.js

6）将combined.js的引用添加到您的html文件中。

如何使用庞大的打字稿库而不污染HTML？

2 个答案: