如何在不污染 html 的情况下使用庞大的 typescript 库？答案

【问题标题】：How to use a huge typescript library without polluting html?如何在不污染 html 的情况下使用庞大的 typescript 库？
【发布时间】：2016-02-28 17:20:07
【问题描述】：

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

我打算使用结构复杂的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 来构建它。

【问题讨论】：

您可以为此使用 bundle。
你是说模块加载器，比如systemjs吗？
不，我的意思是连接你所有的 js 文件用于生产。并且只为供应商（jquery、angular、rxjs...）使用一个文件，为应用程序（引擎、gui、地图...）使用一个文件
是否可以在 Visual Studio 中使用这种方法？
是的。谢谢你的想法！

标签： javascript html visual-studio typescript

【解决方案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>

无需包含每个文件。

【讨论】：

我想指出，这只适用于设计为以模块化方式导出的库。如果库本身不打算作为模块导出，它可能不起作用。 System.js 可以肯定地加载它，但如果库设置为将自身分配给窗口，则代码中的任何内容都不能阻止它填充窗口命名空间。
如果模块本身只使用 //，是否可以导入模块？会导入子模块吗？
据我所知 - 不，他们会要求您将 thouse 添加为脚本标签。您可以在此处阅读有关此主题的一些信息：github.com/Microsoft/TypeScript-Handbook/blob/master/pages/…
还有一个我没有提到的选项：您可以创建自己的捆绑包，将所有 js 文件连接成一个 - 并仅引用那个。如果您必须处理以非模块化方式编写的库，这是为了以防万一。
作者使用Jake。但是代码在内部作为模块。如果“yendor.ts/src/umbra/umbra.ts”处的代码以module Umbra 开头，除了 /// 之外我应该写什么？跨度>

【解决方案2】：

Miguel Lattuada 建议的选项适用于特定库 (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 文件中。

【讨论】：

你可能想删除测试文件夹，因为它在没有 Jake 的情况下执行而不是 gmae 示例