如何在不污染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的情況下使用巨大的打字稿庫？

回答

相關問題