创建可在浏览器和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?

Answer 1

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.