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
– Pawel, Commented Nov 22, 2016 at 18:56

deathangel908 · Accepted Answer · 2019-05-21 08:52:45Z

10

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, 2019 at 8:52

deathangel908

9,81711 gold badges54 silver badges92 bronze badges

answered Nov 22, 2016 at 18:24

Eryk Napierała

5064 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pawel Over a year ago

I tried umd but did not postprocess it with webpack/browserify. I will give it a try.

Pawel Over a year ago

Looks like with browserify I can create a bundle for all the scripts. I would like to 'bundle' only my library.

Eryk Napierała Over a year ago

What file do you try to "browserify"? Entry point of your library, right?

Pawel Over a year ago

Got it - I did not use the --standalone and could not make things work.

Pedro A Over a year ago

Can you add a clarification on how to use one of these module bundlers in this case?

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related