umdjs/umd

★ 7,447JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((umd))
    What it does
      Module format bridge
      Single file works everywhere
    Formats supported
      AMD RequireJS
      CommonJS Node.js
      Browser globals
    How to use
      Pick a template
      Wrap your code
      Build tool plugins
    Context
      Pre-ES-modules era
      Legacy codebases
      Wide browser support

mindmap root((umd)) What it does Module format bridge Single file works everywhere Formats supported AMD RequireJS CommonJS Node.js Browser globals How to use Pick a template Wrap your code Build tool plugins Context Pre-ES-modules era Legacy codebases Wide browser support

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Wrap a JavaScript utility library in a UMD template so it works for both npm users and developers who load it via a script tag.

USE CASE 2

Add RequireJS/AMD compatibility to a library that currently only works in Node.js without shipping a second file.

USE CASE 3

Support legacy projects that cannot yet migrate to ES modules by wrapping code in the appropriate UMD template.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

UMD stands for Universal Module Definition, and this repository is a collection of JavaScript code templates that solve a specific historical problem: JavaScript has had several incompatible systems for loading and sharing code between files, and a library written for one system would not work in another. The main formats involved are AMD, which was used by browser-side script loaders like RequireJS, CommonJS, which is the format Node.js uses, and plain browser globals, where a library just attaches itself to the global window object. Before UMD, a library author who wanted their code to work in all three environments would have to ship three separate files. UMD is a pattern, written as a small wrapper around your module code, that detects which environment it is running in and adapts automatically. A single file can then load correctly whether someone is using RequireJS in a browser, importing it in Node, or just including it with a script tag. The repository contains several template variations rather than one universal answer, because different types of modules have different needs. Some modules have no dependencies at all, some depend on jQuery, some have circular references between modules, and so on. Each variation is a separate file with comments explaining which situation it is meant for. A library author reads through the options and picks the one that fits their code. Build tool plugins for Grunt, Gulp, and other systems are listed in the README, which can wrap your code in the appropriate UMD boilerplate automatically without you having to write the wrapper by hand. This project is largely of historical interest today. The JavaScript ecosystem has since settled on ES modules as the standard format, supported natively by modern browsers and recent versions of Node.js. Tools like webpack, Rollup, and esbuild now handle cross-format compatibility. But UMD remains in wide use in older codebases and libraries that needed to support environments from before that standardization.

Copy-paste prompts

Prompt 1

Take my JavaScript date-formatting utility and wrap it with the correct UMD template so it works in Node.js, RequireJS, and plain browser script tags, no build tools needed.

Prompt 2

My library depends on jQuery, which UMD template from umdjs/umd should I use, and how do I declare jQuery as a dependency in the wrapper?

Prompt 3

Explain the difference between the 'amdWeb' and 'commonjsAdapter' UMD templates so I can pick the right one for a library with no external dependencies.

Prompt 4

Convert an existing UMD-wrapped module to the native ES module format using export/import while keeping a CommonJS fallback.

Open on GitHub → Explain another repo

← umdjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.