How to universally export an NPM module (for the Browser)?

Question

I wrote an NPM module. Let's say this is it:

class MyModule {
    // bla bla
};

I want to export MyModule in an universal way , so people can import it in the Browser in any of the 3 most popular approaches :

1. Using ES6 Imports:

    // If a transpiler is configured (like Traceur Compiler, Babel, Rollup or Webpack): import MyModule from 'my-npm-module';

2. Use CommonJS Imports

    // If a module loader is configured (like RequireJS, Browserify or Neuter): const MyModule = require('my-npm-module');

3. Just reference the script file in the HTML:

<script src="/node_modules/my-npm-module/index.js">
<script>
    const module = new MyModule();
</script>

How can I do that? How should I export my MyModule ?

Answer 1

What you're looking for is the Universal Module Definition (UMD) pattern. It is defined here: https://github.com/umdjs/umd

It's a pattern that provides a clean way to provide your module to different environments that consume modules in a variety of ways.

The standard pattern is:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['dependency'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('dependency'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.dependency);
    }
}(this, function (dependency) {
    // Use dependency in some fashion.
    return {
        // Your Module goes here
    };
}));

If you're using grunt or gulp or webpack, you'll find that there is a plugin that can wrap your modules like this for you; indeed, it's in the core of webpack already.

Answer 2

just an example from yeoman https://github.com/umdjs/umd/blob/master/templates/returnExports.js

// create a simplified module returnExport that has no dependency
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(this, function () {

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

I suggest also to see the source code of the famous Q library

Answer 3

Try with:

(function(exports) {
    class MyModule {
       // ...
    }

    exports = MyModule;
})(typeof exports === 'undefined' ? this['MyModule'] = {} : exports)

Then, if you want to publish your NPM package, just follow the official docs: https://docs.npmjs.com/getting-started/publishing-npm-packages