为浏览器

Question

我在构建打字稿工作流程时遇到问题。我有一堆打字稿文件。我希望将它们编译并连接成一个包。我希望将此捆绑包提供给Web浏览器。但是，浏览器无法识别一些输出的关键字（导出，导出，定义，系统）。

经过一番研究，我想出了requireJs。

这是我的结构：

dist
    |__js
        |__dist.js //The compiled bundle will reside here.
    |__index.html
    |__main.js // For require JS.
src
    |__configuration.ts
    |__core.ts
    |__info-card.ts
    |__main.ts
    |__pack.ts
gulpfile.js
package.json
tsconfig.json

tsconfig.json文件具有以下规则：

{
    "files": [
        "src/*.ts"
    ],
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": false,
        "target": "es5",
        "outFile": "dist.js"
    }
}

colpiled dist.js输出如下：

define("configuration", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Configuration = /** @class */ (function () {
        function Configuration(drawArea, size, className, sidePadding, marginBetweenPacks, lineColor) {
            this.className = "info-card";
            this.sidePadding = 20;
            this.marginBetweenPacks = 50;
            this.lineColor = "#777";
            this.drawArea = drawArea;
            this.size = size;
        }
        return Configuration;
    }());
    exports.Configuration = Configuration;
    var Size = /** @class */ (function () {
        function Size() {
        }
        return Size;
    }());
    exports.Size = Size;
});
define("info-card", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var InfoCard = /** @class */ (function () {
        function InfoCard() {
        }
        return InfoCard;
    }());
    exports.InfoCard = InfoCard;
    var Connection = /** @class */ (function () {
        function Connection() {
        }
        return Connection;
    }());
    exports.Connection = Connection;
});
define("pack", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Pack = /** @class */ (function () {
        function Pack() {
        }
        return Pack;
    }());
    exports.Pack = Pack;
});
define("core", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var SankeyGraph = /** @class */ (function () {
        function SankeyGraph(config, packs) {
            this.configuration = config;
            this.packs = packs;
            this.prepare();
        }
        SankeyGraph.prototype.draw = function () {
        };
        SankeyGraph.prototype.prepare = function () {
            var scrollableContent = this.prepareScrollableContent();
            this.canvasElement = this.prepareCanvasElement();
            this.infocardContainer = this.prepareInfocardContainer();
            scrollableContent.appendChild(this.canvasElement);
            scrollableContent.appendChild(this.infocardContainer);
            this.configuration.drawArea.appendChild(scrollableContent);
            this.calculateColumnWidth();
        };
        SankeyGraph.prototype.prepareScrollableContent = function () {
            var content = document.createElement("div");
            content.style.overflowY = "auto";
            content.style.overflowX = "hidden";
            content.style.width = this.configuration.size.width + "px";
            content.style.height = this.configuration.size.height + "px";
            content.style.position = "absolute";
            return content;
        };
        SankeyGraph.prototype.prepareCanvasElement = function () {
            var element = document.createElement("div");
            element.style.width = this.configuration.size.width + "px";
            element.style.position = "absolute";
            element.style.backgroundColor = "transparent";
            return element;
        };
        SankeyGraph.prototype.prepareInfocardContainer = function () {
            var container = document.createElement("div");
            container.style.width = this.configuration.size.width + "px";
            container.style.height = this.configuration.size.height + "px";
            container.style.position = "absolute";
            return container;
        };
        SankeyGraph.prototype.getColumnCount = function () {
            var columnNumber = 1;
            this.packs.forEach(function (pack, packIndex) {
                pack.infoCards.forEach(function (infoCard, infoCardIndex) {
                    if (columnNumber <= infoCard.column)
                        columnNumber = infoCard.column;
                });
            });
            this.columnCount = columnNumber;
        };
        SankeyGraph.prototype.calculateColumnWidth = function () {
            this.columnWidth = Math.floor(this.configuration.drawArea.offsetWidth / this.columnCount);
        };
        return SankeyGraph;
    }());
    exports.SankeyGraph = SankeyGraph;
});
define("main", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    document.body.appendChild(document.createTextNode("Lö Text"));
});

我最终想要的是，我可以将此dist.js文件放入浏览器中，只需＆＃34;工作＆＃34;。比如，我想随意实例化新的SankeyGraph个实例。

为此，我在dist/main.js中进行了一些requireJS配置。内容如下：

requirejs.config({
    baseUrl: "./",
    paths: {
        "App": "./js/dist"
    }
});

requirejs(["App"], function(App) {
    console.log(App);
});

很抱歉代码太多，我不知道如何简化，但也提供了足够的信息。这是HTML文件内容：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script data-main="./main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
    </head>
    <body>
    </body>
</html>

浏览器中的console.log(App)输出未定义。请指出正确的方向，尽可能简单的解决方案。我有一个纯JS的另一个项目，我想用这个编译输出。