Creating a typescript library that can be used in browser and nodejs

Question

I would like to create a library that can be used in both - browser and nodejs. For the sake of the argument let's say this is my library:

export default class MyClass {
    public getString(): string {
        return "Message";
    }
}

ES2015 modules are not supported by browsers as of now and I don't want to depend on requirejs or any other module loader when in browser - I would like this library to be consumed just by including the generated .js file using the script tag. It feels that what I want can be achieved by using internal modules (I don't want to pollute the global namespace). However when I wrap my code in namespace/module I am having a hard time to get it compiled to as commonjs module.

What is the proper way of achieving what I want? Or, may be, I am getting completely off the rails here being a typescript and javascript noob?

Please explain downvotes. It is fine to downvote as long as I know why - I am trying to learn. (also jquery does seem to do what I want as per `https://www.npmjs.com/package/jquery` so maybe it's not completely off the rails?) — Pawel, Nov 22 '16 at 18:56

score 11 · Accepted Answer · edited May 21 '19 at 08:52

11

I think what you need is UMD. With tsconfig.json containing

{
  "compilerOptions": {
    "module": "umd"
  },
}

generated JavaScript will look like this:

(function (factory) {
        if (typeof module === 'object' && typeof module.exports === 'object') {
            var v = factory(require, exports); if (v !== undefined) module.exports = v;
        }
        else if (typeof define === 'function' && define.amd) {
            define(["require", "exports"], factory);
        }
    })(function (require, exports) {
        "use strict";
        var MyClass = (function () {
            function MyClass() {
            }
            MyClass.prototype.getString = function () {
                return "Message";
            };
            return MyClass;
        }());
        exports.__esModule = true;
        exports["default"] = MyClass;
    });

It works in node (CommonJS) as well as with browsers (CommonJS, AMD). To allow users of your library to just include it through script tag, you need module bundler like Webpack, Browserify or Rollup. Those will produce UMD definition with global export, so default export of main file of your library will be available as some variable in global scope.

edited May 21 '19 at 08:52

deathangel908

8,601
8
47
81

answered Nov 22 '16 at 18:24

Eryk Napierała

516
4
7

1

I tried umd but did not postprocess it with webpack/browserify. I will give it a try. – Pawel Nov 22 '16 at 18:28
Looks like with browserify I can create a bundle for all the scripts. I would like to 'bundle' only my library. – Pawel Nov 22 '16 at 18:58
What file do you try to "browserify"? Entry point of your library, right? – Eryk Napierała Nov 22 '16 at 20:07
Got it - I did not use the `--standalone` and could not make things work. – Pawel Nov 22 '16 at 20:44
Can you add a clarification on how to use one of these module bundlers in this case? – Pedro A Feb 24 '19 at 21:05

Creating a typescript library that can be used in browser and nodejs

1 Answers1

Linked