If you are a frontend developer, you must have heard about AMD, UMD, CJS(CommonJS) and ESM(ES6 Module). There are too many concepts to understand.

In this article, I will introduce the history of these modules and how to choose them in 2025.

Why do we need modules?

As Javascript projects grow in complexity and the number of files continues to increase, we need an effective way to organize and manage these files and their dependencies. Modules can resolve namespace conflicts and provide a way to organize code.

History of modules

• RequireJS (2010)
• SeaJS (2013)
• ESM (2015, Node.js added support in v13.2.0 in 2019)

What is the difference between AMD, CJS, UMD and ESM?

AMD (Asynchronous Module Definition)

AMD is designed for browser applications. It provides asynchronous module loading support. Requirejs is the representative library of AMD.

The main structure of AMD is as follows:

// foo.js
define(function () {
  return {
    foo: function () {
      console.log('foo')
    },
  }
})

// bar.js
define(['./foo'], function (foo) {
  foo.foo()
})

During that period, there was a similar library to requirejs called seajs. It implemented the CMD (Common Module Definition) standard, which maintained better compatibility with CJS.

CJS (CommonJS)

CJS is used on the server-side and adopted by Node.js as its module system. module.exports and require are the main syntax of CJS.

The main structure of CJS is as follows:

// foo.js
module.exports = function () {}

// bar.js
const module = require('./foo')

If you want to use compilers like babeljs and uglifyjs in your project, you should use grunt, gulp or webpack to build your project (as was common around 2015). gulp is a task runner - if you want to use CJS, you need a plugin to support it, usually browserify. You can also use browserify alone to build your project. webpack supports CJS by default and has more features, is easier to use, and requires less configuration than gulp. As a result, webpack gradually replaced gulp.

UMD (Universal Module Definition)

CJS and AMD are both popular module systems. If a third-party library needs to support both the browser and Node.js, and supports different module systems, it can use UMD. UMD is a module format that can be used in both the browser and Node.js. It combines AMD and CJS, and supports global variable definition.

The main structure of UMD is as follows:

;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory)
  } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    module.exports = factory(require('jquery'))
  } else {
    // Browser globals (root is window)
    root.returnExports = factory(root.jQuery)
  }
})(this, function ($) {
  //    methods
  function myFunc() {}

  //    exposed public method
  return myFunc
})

ESM (ECMAScript Module)

ESM is considered the official module system of JavaScript and is natively supported in modern browsers. It uses the import and export syntax to define modules. This provides more opportunities for optimizations such as tree-shaking and static analysis.

The main structure of ESM is as follows:

// foo.js
export function foo() {
  console.log('foo')
}

// bar.js
import { foo } from './foo'
foo()

How to choose modules in 2025

All modern build tools support ESM, so you should prioritize using ESM. However, when working with build bundles, it's important to understand the differences between ESM and CJS.

In Node.js environments, you can enable ESM by either:

• Setting "type": "module" in your package.json
• Using the .mjs file extension

For more details, see Node.js ESM documentation (opens new window).

By default, Vite assumes native ESM support. You can specify custom targets using the build.target configuration option. See Vite build target (opens new window). If you encounter any module-related errors, please refer to the troubleshooting (opens new window) page first.

At least, I recommend using Bun.js as a runtime for Node.js. It supports TypeScript by default and offers higher performance than Node.js. No more configuration for a complicated tsconfig.json, and you don't need to configure watch mode anymore.