liveBook · Manning

Universal Module Definition

As explained in Web Components in Action

Universal Module Definition is a module wrapper format that supports multiple JavaScript loading environments, including CommonJS, AMD, and browser globals.

Universal Module Definition (UMD) packages a JavaScript component so it can load through CommonJS, AMD, or a browser global. This makes one bundle usable with systems such as RequireJS or with no loading mechanism at all. section 12.4

A UMD bundle supports three loading paths:

  • CommonJS for applications using that module system. section 12.4
  • AMD for asynchronous loaders such as RequireJS. section 12.4
  • A browser global attached to window, such as window.slider. section 12.4

Building a UMD component

Rollup can convert src/slider.js into slider.js with `--format umd --name slider`. The generated global is window.slider; choose a distinctive name to reduce application conflicts. Source modules remain available for a larger application to import and bundle independently. section 12.4

./node_modules/.bin/rollup chapter12and13/components/slider/src/slider.
   js --file chapter12and13/components/slider/slider.js --format umd
   --name slider -m

Inspect the complete Rollup command for producing a named UMD bundle. section 12.4

How Web Components in Action covers it

How deep it goes
Explains supported loading paths and demonstrates Rollup flags, while deferring the wrapper’s generated implementation.
Examples
Uses a slider component, window.slider, and a Rollup command producing a named bundle.
What it assumes
Assumes JavaScript module familiarity and introduces UMD alongside ES6 modules, CommonJS, AMD, and browser globals.
What you can do after
Operate/configure UMD output through Rollup and select a distinctive browser-global name.
How it connects
Connects UMD with CommonJS, AMD, RequireJS, browser globals, ES6 modules, Rollup, and source maps.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.