title: Transpile typescript into plain Javascript
body: <p>Something is a bit cloudy in my mind which is the following.
  I have a module written in typescript which will be imported later in some html pages.</p>
  
  <p>sdk.ts</p>
  
  <pre><code>export class PM {
  
    header: any;
    headerLink: string;
    headerDiv: any;
  
    /**
     * @todo remove constructor.
     */
    constructor(mode: string) {
      if (mode == null || mode == undefined) {
        this.buildGUI();
      }
    }
  
    /**
     * Build GUI.
     * It builds the GUI by wrapping the body in a container, adding the header and sidebar.
     */
    buildGUI(): void {
      this.initAndCreateComponents();
      this.insertScript(this.headerLink);
    }
  
    /**
     * Insert script.
     * It inserts the script's import tag in the head of the document.
     * @param {string} scriptLink - script's link to be loaded.
     */
    insertScript(scriptLink: string): void {
      const script = document.createElement('script');
      script.src = scriptLink;
      document.body.appendChild(script);
    };
  
    /**
     * Init and Create Components.
     * It initialises the variables values and it creates the components.
     */
    initAndCreateComponents(): void {
      this.headerLink = '/header/pm-header.js';
  
      this.header = document.createElement("pm-header");
      this.headerDiv = document.createElement("div");
      this.headerDiv.classList.add('pm-header-wrapper');
      this.headerDiv.appendChild(this.header);
  
      document.body.insertBefore(this.headerDiv, document.body.firstChild);
    }    
  }
  
  new PM(null);
  </code></pre>
  
  <p>and this is my tsconfig.json</p>
  
  <pre><code>{
    "compileOnSave": false,
    "include": [
      "src",
      "test"
    ],
    "exclude": [
      "dist",
      "node_modules"
    ],
    "compilerOptions": {
      "sourceMap": false,
      "outDir": "./dist",
      "declaration": true,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": [
        "node_modules/@types"
      ],
      "types": [
        "@types/jasmine",
        "@types/node"
      ],
      "lib": [
        "es2017",
        "dom",
        "es2015.generator",
        "es2015.iterable",
        "es2015.promise",
        "es2015.symbol",
        "es2015.symbol.wellknown",
        "esnext.asynciterable"
      ]
    }
  }
  </code></pre>
  
  <p>now when I run tsc I get and sdk.js that looks like this:</p>
  
  <pre><code>define(["require", "exports"], function (require, exports) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var PM = /** @class */ (function () {
          /**
           * @todo remove constructor.
           */
          function PM(mode) {
              if (mode == null || mode == undefined) {
                  this.buildGUI();
              }
          }
          /**
           * Build GUI.
           * It builds the GUI by wrapping the body in a container, adding the header and sidebar.
           */
          PM.prototype.buildGUI = function () {
              this.initAndCreateComponents();
              this.insertScript(this.headerLink);
          };
  ...
  </code></pre>
  
  <p>Now this generated file is supposed to be imported in several html pages, and when I did my research I found that it could only be loaded using require like this:</p>
  
  <pre><code>&lt;script data-main="/sdk/sdk.js" src="/sdk/require.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>What I want is a way to load my script without the use of any library, to be loaded like any regular plain javascript file.</p>