I am having problems building a typescript workflow. I have bunch of typescript files. I would like them to be compiled and concatenated into a single bundle. I would like this bundle to be served to web browsers. However, browser doesn't recognize some of the outputted keywords (export, exports, define, system).
After some research, I have came up with requireJs.
Here is my structure:
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
The tsconfig.json file has the following rules:
{
"files": [
"src/*.ts"
],
"compilerOptions": {
"module": "amd",
"noImplicitAny": false,
"target": "es5",
"outFile": "dist.js"
}
}
The colpiled dist.js output is as follows:
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"));
});
What I eventually want is that I can put this dist.js file into browser, and simply "works". Such as, I would like to instantiate new SankeyGraph instances at will.
To do this, I have made some requireJS configurations in dist/main.js. The content as follows:
requirejs.config({
baseUrl: "./",
paths: {
"App": "./js/dist"
}
});
requirejs(["App"], function(App) {
console.log(App);
});
Sorry for the too much code, I didn't know how to simplify but also giving enough information. This is the HTML file content:
<!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>
The console.log(App) outputs undefined in the browser. Please point me to the right direction, with simplest possible solution. I have an another project with pure JS and I would like to use this one's compiled output with that one.
