如何在不污染html的情况下使用巨大的打字稿库？

This答案建议手动添加对所有使用的.ts文件生成的.js文件的引用。如何在不污染html的情况下使用巨大的打字稿库？

我打算使用具有复杂结构的library。我已经加顶文件到我的HTML，但他们有subreferences，其中有subsubreferences等

如果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>

inside index.html？

我使用visual studio 2015来构建它。

来源

2016-02-28 user2136963

您可以为此使用包。 –

你的意思是模块加载器，像systemjs？ – user2136963

不，我的意思是连接你的所有js文件进行制作。并且只使用一个文件供应商（jquery，angular，rxjs ...）和一个应用程序（引擎，gui，map ...） –

Miguel Lattuada建议的选项与特定库（yendor.ts）一起工作，尽管它使用了命名空间。

在Visual Studio 2015年

：

1）打开项目设置

2）进入打字稿构建标签

3）设置 “模块” 到 “无”

4）标记“输出” - >“将JavaScript输出合并到文件中”

5）指定绝对附加到您的应用程序的路径与combined.js例如，C:\Users\admin\Google Drive\My App\Client\Client\combined.js

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

来源

2016-02-28 19:34:39 user2136963

你可能想要删除测试文件夹，因为它执行而不是没有杰克的gmae样本 – user2136963

你可以做到这一点：

使用打字稿modules
使用模块加载器（systemjs或如）来加载模块自动

遵循这两个规则索引整理你的代码。 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>

无需包含每一个文件。

来源

2016-02-28 17:27:31 Amid

我想指出的是，这只适用于以模块化方式导出的库。如果库本身不是作为模块导出的，它可能无法工作。系统。js可以加载它，但是如果库设置为将自己分配给窗口，代码中的任何内容都不能阻止它填充窗口名称空间。 – Binvention

如果模块本身仅使用// ，是否可以导入模块？子模块是否会导入？ – user2136963

据我所知 - 不，他们会要求你添加脚本作为脚本标签。有关这个主题，你可以在这里阅读：https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Namespaces%20and%20Modules.md – Amid

如何在不污染html的情况下使用巨大的打字稿库？

回答

相关问题