Create a small sdk using typescript in a single js file

Question

I am trying to create a small sdk library written in typescript. My idea is to create a project that will contain many ts files that will compile into one js, and my library can have access, for example foo.bar.myPublicClasses

The biggest point I don’t want to use it on simple html pages, my environment is Dynamics CRM, so JavaScript is not enabled in the regular html script include tag, and JavaScript is loaded asynchronously with the assembly structure from Dynamics CRM. So I need to link my library with one file. Therefore, for the summary, I need one related js file without any dependencies with the d.ts file so that it can be reused in other typescript files. Additionally, to run my js code from Dynamics CRM, I need any global function, my approach will be some static function in the class foo.bar.mylibrary.sdk.create ()

My project structure might look like this:

  src /
  | -bundle.ts
  | -classes /
  |  | -classA.ts
  |  | -classB.ts
  | 
  | -interfaces /
  |  | -IInterface1.ts
  |  -IInterface2.ts
  |
  | -Helpers /
  |  | -HelperA.ts
  |  | -HelperA.ts
  |
  dist /
  |  -myLibrary.js

I would like to have .ts files larger, as I would write my C # code one file for each class, etc.

Version 1 My initial approach was to use a namespace, but I'm not sure if this is the best way to do this in the long run of a project. in this apporach I write all ts files in my namespace, only one bad smell for me is that in the combined js file every ts file will write

//a.ts namespace foo.bar.mylibrary{ class a { isOk:boolean; } export class b { constructor(){ let test = new a(); test.isOk = false; } } } //b.ts namespace foo.bar.mylibrary{ export class sdk{ public isStart:boolean; public static Create(){ //initialize my sdk } } } 

compile

 "use strict"; // b.ts var foo; (function (foo) { var bar; (function (bar) { var mylibrary; (function (mylibrary) { var a = (function () { function a() { } return a; }()); var b = (function () { function b() { var test = new a(); test.isOk = false; } return b; }()); mylibrary.b = b; })(mylibrary = bar.mylibrary || (bar.mylibrary = {})); })(bar = foo.bar || (foo.bar = {})); })(foo || (foo = {})); var foo; (function (foo) { var bar; (function (bar) { var mylibrary; (function (mylibrary) { var sdk = (function () { function sdk() { } sdk.Create = function () { //initialize my sdk }; return sdk; }()); mylibrary.sdk = sdk; })(mylibrary = bar.mylibrary || (bar.mylibrary = {})); })(bar = foo.bar || (foo.bar = {})); })(foo || (foo = {})); 

Perhaps there is a better way to compile these ts files.

my tsconfig contains a module - commonjs, outputfile - myLibrary.js

Version 2 According to typescript documentation, it would be better to use external modules now, but I'm not sure if compiled js is what I would see, that not exported classes are compiled into a simple var object, and the exported class into specific functions.

 //a.ts class a { isOk:boolean; } export class b { constructor(){ let test = new a(); test.isOk = false; } } //b.ts export class sdk{ public isStart:boolean; public static Create(){ //initialize my sdk } } //build.ts export {sdk} from "./src/b"; 

compile

 define(["require", "exports", "./src/classb"], function (require, exports, classb_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); // export * from "./src/classa"; __export(classb_1); }); 

And then I need to assemble my required modules, but I do not know how to do it properly.

my tsconfig contains the module - amd, outputfile - myLibrary.js

I suppose I need gulp or some other toolkit to run my library, but can anyone give me some tips or how to do this?

Answer 1

this is my tsconfig.json and it only sends one js file

 { "compilerOptions": { "module": "amd", "target": "es5", "sourceMap": true, "outFile": "../public/js/yourfile.js" }, "exclude": [ "node_modules", "typings" ] }