• The order of <script> tags matters. The library needs to define its own global variables first, or the code that consumes it will throw an error.
• There is no (easy) way to exclude library code that was never used, especially if it is minimized or obfuscated. If you want to use any part of a library or framework, you must load the entire thing.
• If two libraries define the same global variable name, then you cannot use both without overriding one of them.
• If you want to break up your own JavaScript code into multiple files, you must use this technique of binding to the global context in order to share state or functions.

• Code providers: Modules enable source code to declare what it is making available for other code to depend upon. Modules provide a mechanism for saying “if you load me into your code, this is what I provide”.
• Code consumers: Modules enable source code to declare its dependencies. Instead of code assuming that variables exists in the global context, the code can require that other code is loaded and available before proceeding to use it.

Code providers

// simple-math.js
 
const add = (x, y) => x + y
const multiply = (x, y) => x * y
 
module.exports = { add, multiply }

Code consumers

// my-app.js
 
const simpleMath = require('./simple-math.js')
 
console.log(simpleMath.add(3, 4)) // 7

How it works

$ node my-app.js

// Node.js runtime
 
(function(exports, require, module, __filename, __dirname) {
    // my-app.js
 
    const simpleMath = require('./simple-math.js')
 
    console.log(simpleMath.add(3, 4))
})(
    module.exports,
    require,
    module,
    '/home/user/my-app/src/my-app.js',
    '/home/user/my-app/src'
)

• exports is an alias to module.exports (for convenience).
• require is a function which
  1. Resolves the arguments to a file
  2. Wraps the contents of the file in a function just like above
  3. Executes the function and returns the value of module.exports
• module is a pre-initialized object with some data regarding your module and an empty exports property.
• __filename and __dirname are strings set to the absolute path of the module file and its containing directory, respectively.

Benefits of CommonJS

$ npm install jquery

const $ = require('jquery')

const $ = process.env.NODE_ENV === 'production'
    ? require('jquery/dist/jquery.min.js')
    : require('jquery/dist/jquery.js')

Drawbacks of CommonJS

• Asynchronous Module Definition (AMD): This solves the synchronous problem of CommonJS by providing a function instead of an object for module. AMD module contents are only executed when the module is actually used, not at the time of require.
• Universal Module Definition (UMD): This syntax is actually a “superset-syntax” that provides interoperability between JavaScript that uses CJS, AMD, or no modules at all. It’s clever, but not an optimal solution.

// simple-math.js
 
const add = (x, y) => x + y
const multiply = (x, y) => x * y
 
export { add, multiply }

// my-app.js
 
import * as simpleMath from './simple-math.js'
 
console.log(simpleMath.add(3, 4)) // 7

Benefits of ESM

// my-app.js
 
import { add } from './simple-math.js'
 
console.log(add(3, 4)) // 7

Drawbacks of ESM

How it works

How to use it

1. Create two entrypoint files

// index.js
require = require('esm')(module)
module.exports = require('./main.js')

// main.js
import { add } from './simple-math.js'
 
console.log(add(3, 4)) // 7

2. Updated your package.json file

{
    ...,
    "main": "index.js",
    "module": "main.js"
}

3. Profit

What about the .mjs extension?

Additional esm package features

$ node -r esm
> import { add } from './simple-math.js'
undefined
> add(20, 22)
42