0

I have to write a Javascript SDK for a little project I am working on. To do that, I had thought of creating a TypeScript project and compiling it to a single Javascript file, so the users of my SDK could just inject that file in their web pages.

However, I just came to know that if I use import, and try to compile to a single file, then it only supports SystemJS.

So, how to compile a TypeScript project to a single JS file so it is usable in browser?

By usable in browser, I mean that if I create a class App in TypeScript, then I could do this in dev console:

var x = new App();

I have been at this for more than a hour now, and everything I have found seems to suggest that this is not possible.

Edit: This doesn't really answer my question. Like I said in the example, I need the functionality that if there is a class called App in my TypeScript project, it should be visible to the browser with the same name, so I could do var x = new App() in my dev console. (Or a user can do this in his JS file that he injects after injecting my SDK file). That answer is just telling how to create an outfile in SystemJS.

Ankit Sultana
  • 417
  • 4
  • 14
  • Possible duplicate of [Typescript compile to single file](https://stackoverflow.com/questions/34474651/typescript-compile-to-single-file) – toskv Jun 07 '17 at 17:38
  • 1
    You can set `App` globally, well, by the initial value of `this`, `self` or `window`. You could also define `App` directly globally, but TS will warn. i.e., `App = class App {};` –  Jun 07 '17 at 17:48
  • 1
    So I will have to do that for every class that I want to expose? There is no other scalable way to do it? – Ankit Sultana Jun 07 '17 at 17:53
  • Only if you find something like webpack which exports everything globally. Maybe webpack can do this. OR you can change the webpack output –  Jun 07 '17 at 18:03

1 Answers1

0

For this you can use webpack, it is a Node.JS utility that attempts to bundle Node.JS-like modules. Webpack doesn't automatically export modules to the global object, but generates (or attempts to generate) a function that replace the Node.JS's default require, which is used to execute the entry module and others, thus you can modify this function for exporting each module (or properties of each module) in the global object.

(In TypeScript, use the CommonJS module. Second, install and use the ts-loader plugin among with webpack, so you'll directly compile TypeScript from webpack.)

Maybe that applies to Webpack 2. For example, you modify the __webpack_require__ function. It is not inside the global object and thus you must interfere in the webpack's generated source code, at function __webpack_require__:

function __webpack_require__(moduleId) {
    // [...] (After the `if (installedModules...) ...`)
    /*
     * You don't have access to the module name, so export each
     * property to the browser's global object.
     */
    var exports = module.exports;
    for (var key in exports)
        window[key] = exports[key];
}