On this page ([http://docs.nodejitsu.com/articles/getting-started/what-is-require](https://web.archive.org/web/20130930091238/http://docs.nodejitsu.com/articles/getting-started/what-is-require)), it states that &quot;If you want to set the exports object to a function or a new object, you have to use the module.exports object.&quot;

My question is why.

    // right
    module.exports = function () {
      console.log(&quot;hello world&quot;)
    }
    // wrong
    exports = function () {
      console.log(&quot;hello world&quot;)
    }

I console.logged the result (`result=require(example.js)`) and the first one is `[Function]` the second one is `{}`.

Could you please explain the reason behind it? I read the post here: https://stackoverflow.com/questions/7137397/module-exports-vs-exports-in-nodejs . It is helpful, but does not explain the reason why it is designed in that way. Will there be a problem if the reference of exports be returned directly?

Difference between &quot;module.exports&quot; and &quot;exports&quot; in the CommonJs Module System

**EDIT**: This is **not about fat arrows**. It&#39;s also not about passing _this_ to an **IIFE**. It&#39;s a transpiler-related question.

So I&#39;ve created a simple pub-sub for a little app I&#39;m working on. I wrote it in ES6 to use spread/rest and save some headaches. I set it up with npm and gulp to transpile it but it&#39;s driving me crazy.

I made it a browser library but realized it could be used anywhere so I decided to make it Commonjs and AMD compatible.

Here&#39;s a trimmed down version of my code:

    (function(root, factory) {
     if(typeof define === &#39;function&#39; &amp;&amp; define.amd) {
        define([], function() {
            return (root.simplePubSub = factory())
        });
      } else if(typeof module === &#39;object&#39; &amp;&amp; module.exports) {
        module.exports = (root.simplePubSub = factory())
      } else {
        root.simplePubSub = root.SPS = factory()
      }
    }(this, function() {
     // return SimplePubSub
    });


But no matter what I try (such as making _this_ a variable and passing it) it sets it to _undefined_.

    }(undefined, function() {

It probably has something to do with Babel not knowing what _this_ will be and transpiling it away but is there any other approach I can take?

**UPDATE**: Passing `}((window || module || {}), function() {` instead of _this_ seems to work. I&#39;m not sure this is the best approach though.

How to stop babel from transpiling &#39;this&#39; to &#39;undefined&#39; (and inserting &quot;use strict&quot;)

&gt; **Possible Duplicate:**  
&gt; [What are the differences between Deferred, Promise and Future in Javascript?](https://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascript)  

&lt;!-- End of automatically inserted text --&gt;

Lately I&#39;ve been making an effort to improve the quality of my JavaScript applications.

One pattern I&#39;ve adopted is to use a separate &quot;data context&quot; object to load data for my application (previously I was doing this directly in my view models).

The following example returns data that is initialized on the client:

    var mockData = (function($, undefined) {
    
        var fruit = [
            &quot;apple&quot;,
            &quot;orange&quot;,
            &quot;banana&quot;,
            &quot;pear&quot;
            ];
    
        var getFruit = function() {
            return fruit;
        };
    
        return {
            getFruit: getFruit
        }
    })(jQuery);

In most cases we&#39;ll be loading data from the server so we can&#39;t return an immediate response. It seems I have two options for how we handle this in our API:

1. Using a callback
2. Returning a [promise][1].

Previously I&#39;d always used the callback approach:

    var getFruit = function(onFruitReady) {
        onFruitReady(fruit);
    };

    // ...

    var FruitModel = function(dataContext, $) {
        return {
            render: function() {
                dataContext.getFruit(function(fruit) {
                    // do something with fruit
                });
            }
        };
    };

However, I can see how it&#39;s possible to end up in callback hell, especially when building complex JavaScript applications.

Then I came across the Promises design pattern. Instead of requiring the caller to supply a callback, I instead return a &quot;promise&quot; that can be observed:

    var getFruit = function() {
        return $.Deferred().resolve(fruit).promise();
    };

    // ...
    dataContext.getFruit().then(function(fruit) {
        // do something with fruit
    });

I can see obvious benefits of using this pattern, especially since I can `wait` on multiple deferred objects which could be very useful when loading initialization data for a single page application.

However, I&#39;m keen to understand the pros and cons of each pattern before I start to use either in anger. I&#39;m also interested in whether this is the direction other libraries are going in. It seems to be the case with jQuery.

Here&#39;s a [link][2] to the fiddle I&#39;m using for testing.


  [1]: http://api.jquery.com/promise/
  [2]: http://jsfiddle.net/benfosterdev/yenGc/3/

Asynchronous JavaScript - Callbacks vs Deferred/Promise

I’m trying out webpack (http://webpack.github.io/) and it looks really nice, however I’m kind of stuck here.

Say that I’m using a CDN for a library, f.ex jQuery. Then in my code, I want the `require(&#39;jquery&#39;)` to automatically point to the global jquery instance, instead of trying to include it from my modules.

I’ve tried using plugins like the `IgnorePlugin`:

    new webpack.IgnorePlugin(new RegExp(&quot;^(jquery|react)$&quot;))

This works for ignoring the library, but it still says that the required module is &quot;missing&quot; when I run the webpacker.

Somehow I need to tell webpack that `jquery` should be picked up from the global context instead. Seems like a common use case, so I’m kind of surprised that the docs doesn’t target this specifically.

Webpack and external libraries

I&#39;ve started using webpack2 (to be precise, `v2.3.2`) and after re-creating my config I keep running into an issue I can&#39;t seem to solve I get (sorry in advance for ugly dump):

    ERROR in ./src/main.js
    Module not found: Error: Can&#39;t resolve &#39;components/DoISuportIt&#39; in &#39;[absolute path to my repo]/src&#39;
    resolve &#39;components/DoISuportIt&#39; in &#39;[absolute path to my repo]/src&#39;
      Parsed request is a module
      using description file: [absolute path to my repo]/package.json (relative path: ./src)
        Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
        aliased with mapping &#39;components&#39;: &#39;[absolute path to my repo]/src/components&#39; to &#39;[absolute path to my repo]/src/components/DoISuportIt&#39;
          using description file: [absolute path to my repo]/package.json (relative path: ./src)
            Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
          after using description file: [absolute path to my repo]/package.json (relative path: ./src)
            using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
              as directory
                [absolute path to my repo]/src/components/DoISuportIt doesn&#39;t exist
              no extension
                Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
                [absolute path to my repo]/src/components/DoISuportIt doesn&#39;t exist
              .js
                Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
                [absolute path to my repo]/src/components/DoISuportIt.js doesn&#39;t exist
              .jsx
                Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
                [absolute path to my repo]/src/components/DoISuportIt.jsx doesn&#39;t exist
    [[absolute path to my repo]/src/components/DoISuportIt]
    [[absolute path to my repo]/src/components/DoISuportIt]
    [[absolute path to my repo]/src/components/DoISuportIt.js]
    [[absolute path to my repo]/src/components/DoISuportIt.jsx]

**package.json**

&lt;!-- language: lang-json --&gt;

    {
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;./src/main.js&quot;,
      &quot;scripts&quot;: {
        &quot;build&quot;: &quot;webpack --progress --display-error-details&quot;
      },
      &quot;devDependencies&quot;: {
        ...
      },
      &quot;dependencies&quot;: {
        ...
      }
    }

In terms of the `browser` field it&#39;s complaining about, the documentation I&#39;ve been able to find on this is: [`package-browser-field-spec`][1]. There is also webpack documentation for it, but it seems to have it turned on by default: [`aliasFields: [&quot;browser&quot;]`][2]. I tried adding a `browser` field to my `package.json` but that didn&#39;t seem to do any good.

**webpack.config.js**

&lt;!-- language: lang-js --&gt;

    import path from &#39;path&#39;;
    const source = path.resolve(__dirname, &#39;src&#39;);
    
    export default {
      context: __dirname,
      entry: &#39;./src/main.js&#39;,
      output: {
        path: path.resolve(__dirname, &#39;dist&#39;),
        filename: &#39;[name].js&#39;,
      },
      resolve: {
        alias: {
          components: path.resolve(__dirname, &#39;src/components&#39;),
        },
        extensions: [&#39;.js&#39;, &#39;.jsx&#39;],
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            include: source,
            use: {
              loader: &#39;babel-loader&#39;,
              query: {
                cacheDirectory: true,
              },
            },
          },
          {
            test: /\.css$/,
            include: source,
            use: [
              { loader: &#39;style-loader&#39; },
              {
                loader: &#39;css-loader&#39;,
                query: {
                  importLoader: 1,
                  localIdentName: &#39;[path]___[name]__[local]___[hash:base64:5]&#39;,
                  modules: true,
                },
              },
            ],
          },
        ],
      },
    };

**src/main.js**

&lt;!-- language: lang-js --&gt;

    import DoISuportIt from &#39;components/DoISuportIt&#39;;

**src/components/DoISuportIt/index.jsx**

&lt;!-- language: lang-js --&gt;

    export default function() { ... }

For completeness, `.babelrc`

&lt;!-- language: lang-json --&gt;

    {
      &quot;presets&quot;: [
        &quot;latest&quot;,
        &quot;react&quot;
      ],
      &quot;plugins&quot;: [
        &quot;react-css-modules&quot;
      ],
      &quot;env&quot;: {
        &quot;production&quot;: {
          &quot;compact&quot;: true,
          &quot;comments&quot;: false,
          &quot;minified&quot;: true
        }
      },
      &quot;sourceMaps&quot;: true
    }

What am I doing wrong/missing?

  [1]: https://github.com/defunctzombie/package-browser-field-spec
  [2]: https://webpack.js.org/configuration/resolve/#resolve-aliasfields


Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration

I&#39;m still very confused about **CommonJS, AMD** and **RequireJS**, even after reading a lot.

I know that **CommonJS** (formerly **ServerJS**) is a group for defining some **JavaScript** specifications (i.e. modules) when the language is used outside the browser. **CommonJS** modules specification has some implementation like **Node.js** or **RingoJS**, right?

&gt; What&#39;s the relation between **CommonJS**, **Asynchronous Module Definition** (AMD) and **RequireJS**? 
&gt;
&gt; Is **RequireJS** an implementation of the **CommonJS** module definition? If yes, what&#39;s **AMD** then?

Relation between CommonJS, AMD and RequireJS?

Before, babel would add the line `module.exports = exports[&quot;default&quot;]`. It no longer does this. What this means is before I could do:

    var foo = require(&#39;./foo&#39;);
    // use foo

Now I have to do this:

    var foo = require(&#39;./foo&#39;).default;
    // use foo

Not a huge deal (and I&#39;m guessing this is what it should have been all along).
The issue is that I have a lot of code that depended on the way that things used to work (I can convert most of it to ES6 imports, but not all of it). Can anyone give me tips on how to make the old way work without having to go through my project and fix this (or even some instruction on how to write a codemod to do this would be pretty slick).

Thanks!

Example:

Input:

    const foo = {}
    export default foo

Output with Babel 5

    &quot;use strict&quot;;
    
    Object.defineProperty(exports, &quot;__esModule&quot;, {
      value: true
    });
    var foo = {};
    exports[&quot;default&quot;] = foo;
    module.exports = exports[&quot;default&quot;];

Output with Babel 6 (and es2015 plugin):

    &quot;use strict&quot;;
    
    Object.defineProperty(exports, &quot;__esModule&quot;, {
      value: true
    });
    var foo = {};
    exports[&quot;default&quot;] = foo;

Notice that the only difference in the output is the `module.exports = exports[&quot;default&quot;]`.

---

# Edit

You may be interested in this blogpost I wrote after solving my specific issue: [Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution](https://kcd.im/tears)

Babel 6 changes how it exports default

I&#39;ve found the following contract in a Node.js module:

    module.exports = exports = nano = function database_module(cfg) {...}

I wonder what&#39;s the difference between `module.exports` and `exports` and why both are used here.

module.exports vs exports in Node.js

I have a script I am requiring from a Node.js script, which I want to keep JavaScript engine independent.

For example, I want to do `exports.x = y;` only if it’s running under Node.js. How can I perform this test?

---

When posting this question, I didn’t know the Node.js modules feature is based on [CommonJS][1].

For the specific example I gave, a more accurate question would’ve been:

How can a script tell whether it has been required as a CommonJS module?


  [1]: http://www.commonjs.org/

How to check whether a script is running under Node.js?

According to the Node.js manual:

&gt; If you want the root of your module&#39;s export to be a function (such as
&gt; a constructor) or if you want to export a complete object in one
&gt; assignment instead of building it one property at a time, assign it to
&gt; module.exports instead of exports.

The example given is:

    // file: square.js
    module.exports = function(width) {
      return {
        area: function() {
          return width * width;
        }
      };
    }

and used like this:

    var square = require(&#39;./square.js&#39;);
    var mySquare = square(2);
    console.log(&#39;The area of my square is &#39; + mySquare.area());

My question: why does the example not use square as an object? Is the following valid and does it make the example more &quot;object oriented&quot;?

    var Square = require(&#39;./square.js&#39;);
    var mySquare = new Square(2);
    console.log(&#39;The area of my square is &#39; + mySquare.area());
 

Node.js - use of module.exports as a constructor

There are some third party Javascript libraries that have some functionality I would like to use in a Node.js server. (Specifically I want to use a QuadTree javascript library that I found.) But these libraries are just straightforward `.js` files and not &quot;Node.js libraries&quot;. 

As such, these libraries don&#39;t follow the `exports.var_name` syntax that Node.js expects for its modules. As far as I understand that means when you do `module = require(&#39;module_name&#39;);` or `module = require(&#39;./path/to/file.js&#39;);` you&#39;ll end up with a module with no publicly accessible functions, etc.

My question then is &quot;How do I load an arbitrary javascript file into Node.js such that I can utilize its functionality without having to rewrite it so that it does do `exports`?&quot;

I&#39;m very new to Node.js so please let me know if there is some glaring hole in my understanding of how it works.

&lt;hr/&gt;

**EDIT**: Researching into things more and I now see that the module loading pattern that Node.js uses is actually part of a recently developed standard for loading Javascript libraries called [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1). It says this right on the [module doc page for Node.js](http://nodejs.org/docs/v0.4.1/api/modules.html), but I missed that until now.

It may end up being that the answer to my question is &quot;wait until your library&#39;s authors get around to writing a CommonJS interface or do it your damn self.&quot;

Load &quot;Vanilla&quot; Javascript Libraries into Node.js

does somebody know how to do a module.exports?

I tried some different ways ending up with

&lt;!-- language: typescript --&gt;

    export class Greeter {}

which will compile to

&lt;!-- language: typescript --&gt;

    exports.Greeter = Greeter;

But what I really want is this:

    exports = Greeter;

So that I can use it like this:

&lt;!-- language: typescript --&gt;

    import { Greeter } from &quot;greeter&quot;;
    
    const greeter = new Greeter();

and not

&lt;!-- language: typescript --&gt;

    import { Greeter } from &quot;greeter&quot;;
    
    const greeter = new Greeter.Greeter();

Is this possible with Typescript?

module.exports in typescript

In my system, I have a number of &quot;classes&quot; loaded in the browser each a separate files during development, and concatenated together for production. As they are loaded, they initialize a property on a global object, here `G`, as in this example:

    var G = {};

    G.Employee = function(name) {
        this.name = name;
        this.company = new G.Company(name + &quot;&#39;s own company&quot;);
    };

    G.Company = function(name) {
        this.name = name;
        this.employees = [];
    };
    G.Company.prototype.addEmployee = function(name) {
        var employee = new G.Employee(name);
        this.employees.push(employee);
        employee.company = this;
    };

    var john = new G.Employee(&quot;John&quot;);
    var bigCorp = new G.Company(&quot;Big Corp&quot;);
    bigCorp.addEmployee(&quot;Mary&quot;);

Instead of using my own global object, I am considering to make each class its own [AMD module][amd], based on [James Burke&#39;s suggestion][class-as-module]:

    define(&quot;Employee&quot;, [&quot;Company&quot;], function(Company) {
        return function (name) {
            this.name = name;
            this.company = new Company(name + &quot;&#39;s own company&quot;);
        };
    });
    define(&quot;Company&quot;, [&quot;Employee&quot;], function(Employee) {
        function Company(name) {
            this.name = name;
            this.employees = [];
        };
        Company.prototype.addEmployee = function(name) {
            var employee = new Employee(name);
            this.employees.push(employee);
            employee.company = this;
        };
        return Company;
    });
    define(&quot;main&quot;, [&quot;Employee&quot;, &quot;Company&quot;], function (Employee, Company) {
        var john = new Employee(&quot;John&quot;);
        var bigCorp = new Company(&quot;Big Corp&quot;);
        bigCorp.addEmployee(&quot;Mary&quot;);
    });

The issue is that before, there was no declare-time dependency between Employee and Company: you could put the declaration in whatever order you wanted, but now, using RequireJS, this introduces a dependency, which is here (intentionally) circular, so the above code fails. Of course, in `addEmployee()`, adding a first line `var Employee = require(&quot;Employee&quot;);` would [make it work][circular], but I see this solution as inferior to not using RequireJS/AMD as it requires me, the developer, to be aware of this newly created circular dependency and do something about it.

Is there a better way to solve this problem with RequireJS/AMD, or am I using RequireJS/AMD for something it was not designed for?

  [amd]: http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
  [class-as-module]: https://stackoverflow.com/questions/4869530/requirejs-how-to-define-modules-that-contain-a-single-class/4878241#4878241
  [circular]: http://requirejs.org/docs/api.html#circular


How to handle circular dependencies with RequireJS/AMD?

I have an ES6 module that exports two constants:

    export const foo = &quot;foo&quot;;
    export const bar = &quot;bar&quot;;

I can do the following in another module:

    import { foo as f, bar as b } from &#39;module&#39;;
    console.log(`${f} ${b}`); // foo bar

When I use NodeJS modules, I would have written it like this:

    module.exports.foo = &quot;foo&quot;;
    module.exports.bar = &quot;bar&quot;;

Now when I use it in another module can I somehow rename the imported variables as with ES6 modules?

    const { foo as f, bar as b } = require(&#39;module&#39;); // invalid syntax
    console.log(`${f} ${b}`); // foo bar

How can I rename the imported constants in NodeJS modules?


Can I use alias with NodeJS require function?

I&#39;m learning JS and someone more experienced mentioned that they use CommonJS to handle keeping js code organized (since there&#39;s no &quot;module&quot; functionality).

I looked on Quora, but it explained the *group* and it&#39;s goals, not so much how I might use it.



What is CommonJS and why should I care how it can help in writing .js applications?

What is the best way to load CommonJS modules as client-side JavaScript code in the browser?

[CommonJS][1] modules put their functionality in the `module.exports` namespace and are usually included using `require(pathToModule)` in a server-side script. Loading them on the client cannot work the same way (require needs to be replaced, asynchronousness needs to be taken into account, etc.).

I have found module loaders and other solutions: Browserify, RequireJS, yabble, etc. or ways to simply alter the modules. What do you consider the best way and why?

  [1]: https://en.wikipedia.org/wiki/CommonJS




How can I &#39;require&#39; CommonJS modules in the browser?

I have a number of JavaScript &quot;classes&quot; each implemented in its own JavaScript file. For development those files are loaded individually, and for production they are concatenated, but in both cases I have to manually define a loading order, making sure that B comes after A if B uses A. I am planning to use [RequireJS][requirejs] as an implementation of [CommonJS Modules/AsynchronousDefinition][modules] to solve this problem for me automatically.

Is there a better way to do this than to define modules that each export one class? If not, how to you name what the module exports? A module &quot;employee&quot; exporting a class &quot;Employee&quot;, as in the example below, doesn&#39;t feel [DRY][dry] enough to me.

    define(&quot;employee&quot;, [&quot;exports&quot;], function(exports) {
        exports.Employee = function(first, last) {
            this.first = first;
            this.last = last;
        };
    });

    define(&quot;main&quot;, [&quot;employee&quot;], function (employee) {
        var john = new employee.Employee(&quot;John&quot;, &quot;Smith&quot;);
    });


  [dry]: http://en.wikipedia.org/wiki/DRY
  [requirejs]: http://requirejs.org/
  [modules]: http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition

RequireJS: How to define modules that contain a single &quot;class&quot;?

I have defined the following Angular2 component:

    import {Component} from &#39;angular2/core&#39;;

    @Component({
      selector: &#39;my-app&#39;,
      moduleId: module.id,
      templateUrl: &#39;./app.component.html&#39;
    })
    export class AppComponent {
    }

When I try to compile this, I get the following error on line 5:

    src/app/app.component.ts(5,13): error TS2304: Cannot find name &#39;module&#39;.

I believe module.id is referring to the CommonJS `module` variable (see [here](https://angular.io/docs/js/latest/api/core/ComponentMetadata-class.html)). I have specified the CommonJS module system in tsconfig.json:

    {
      &quot;compilerOptions&quot;: {
        &quot;target&quot;: &quot;es5&quot;,
        &quot;module&quot;: &quot;commonjs&quot;,
        &quot;declaration&quot;: false,
        &quot;removeComments&quot;: true,
        &quot;noLib&quot;: false,
        &quot;emitDecoratorMetadata&quot;: true,
        &quot;experimentalDecorators&quot;: true,
        &quot;sourceMap&quot;: true,
        &quot;pretty&quot;: true,
        &quot;allowUnreachableCode&quot;: false,
        &quot;allowUnusedLabels&quot;: false,
        &quot;noImplicitAny&quot;: true,
        &quot;noImplicitReturns&quot;: true,
        &quot;noImplicitUseStrict&quot;: false,
        &quot;noFallthroughCasesInSwitch&quot;: true
      },
      &quot;exclude&quot;: [
        &quot;node_modules&quot;,
        &quot;dist&quot;,
        &quot;typings/browser.d.ts&quot;,
        &quot;typings/browser&quot;,
        &quot;src&quot;
      ],
      &quot;compileOnSave&quot;: false
    }

How can I correct the TypeScript error?

TypeScript error in Angular2 code: Cannot find name &#39;module&#39;

So the code is simple:

calls.json
   
    {&quot;SERVER&quot;:{
        &quot;requests&quot;:{
          &quot;one&quot;:&quot;1&quot;
        }
    } }

file.ts

    import json = require(&#39;../static/calls.json&#39;);
    console.log(json.SERVER);

the generated javascript is correct and when running the node js server, the console log json.SERVER prints &#39;{ requests: { one: &#39;1&#39; } }&#39;, as it should.

The typescript compiler (commonjs) however, somehow does not particularly like this situation and throws: &quot;Cannot find module &#39;../static/calls.json&#39;&quot;.

Ofcourse I tried writing a .d.ts file, like this:

    declare module &#39;../static/calls.json&#39;{
        var exp:any;
        export = exp;
    }

this then obviously throws: &quot;Ambient module declaration cannot specify relative module name&quot;.

I also tried different variants, like:

    declare module &#39;calls.json&#39; {
        import * as json from &#39;/private/static/calls.json&#39;;
        export = json;
    }
and then requiring:

    import json = require(&#39;calls.json&#39;);

None work properly and have their own little compiler errors :)

I want to use an external .json file because I use commonjs serverside and amd clientside and I want a single file for loading constants.

All Commonjs Solutions on Gang of Coders

Total of 19 Commonjs Solutions

Difference between "module.exports" and "exports" in the CommonJs Module System

How to stop babel from transpiling 'this' to 'undefined' (and inserting "use strict")

Asynchronous JavaScript - Callbacks vs Deferred/Promise

Webpack and external libraries

Field 'browser' doesn't contain a valid alias configuration

Relation between CommonJS, AMD and RequireJS?

Babel 6 changes how it exports default

module.exports vs exports in Node.js

How to check whether a script is running under Node.js?

Node.js - use of module.exports as a constructor

Load "Vanilla" Javascript Libraries into Node.js

module.exports in typescript

How to handle circular dependencies with RequireJS/AMD?

Can I use alias with NodeJS require function?

What is CommonJS and why should I care how it can help in writing .js applications?

How can I 'require' CommonJS modules in the browser?

RequireJS: How to define modules that contain a single "class"?

TypeScript error in Angular2 code: Cannot find name 'module'

Typescript compiler error when importing json file