How to use a huge typescript library without pollu

2019-07-19 08:40发布

站内问答 / JavaScript
813 2 6

This answer suggests to manually add reference to .js files produced by all used .ts files.

I intend to use a library with a complex structure. I already added top files to my html, but they have subreferences, which have subsubreferences and etc.

If app.ts starts with

/// <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" />

Can I leave only

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

Instead of

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?

I use visual studio 2015 to build this.

2条回答
Bombasti
2楼-- · 2019-07-19 08:50

You can do that by:

  1. Organize your code using typescript modules
  2. Use module loader (systemjs or such) to load modules automatically

Following these two rules your index.html will look something like this:

<!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>

Without need to include every single file.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-07-19 09:06

The option suggested by Miguel Lattuada, worked with specific library (yendor.ts), despite it used namespaces.

in Visual Studio 2015:

1)Open project settings

2)Go to TypeScript build tab

3)Set "Module System" to "None"

4)Mark "Output"->"Combine JavaScript output into file"

5)Specify absolute path to your app suffixed with combined.js For example, C:\Users\admin\Google Drive\My App\Client\Client\combined.js

6)Add reference to combined.js to your html file.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)