@babel/plugin-transform-modules-umd · Babel Skip to main content Docs Setup Try it out Videos Blog Search Donate Team GitHub * Modules * AMD * Common JS * SystemJS * UMD * TC39 Proposals * Web Compatibility * * Modules * UMD On this page @babel/plugin-transform-modules-umd History Version Changes v7.14.0 Implemented the importInterop option info This plugin is included in @babel/preset-env under the modules option This plugin transforms ES2015 modules to UMD . Note that only the syntax of import/export statements ( import "./mod.js" ) is transformed, as Babel is unaware of different resolution algorithms between implementations of ES2015 modules and UMD. ⚠️ This plugin does not support dynamic import ( import('./lazy.js') ). Example ​ In JavaScript export default 42 ; Out JavaScript ( function ( global , factory ) { if ( typeof define === "function" && define . amd ) { define ( [ "exports" ] , factory ) ; } else if ( typeof exports !== "undefined" ) { factory ( exports ) ; } else { var mod = { exports : { } , } ; factory ( mod . exports ) ; global . actual = mod . exports ; } } ) ( this , function ( exports ) { "use strict" ; Object . defineProperty ( exports , "__esModule" , { value : true , } ) ; exports . default = 42 ; } ) ; Installation ​ * npm * Yarn * pnpm * Bun npm install --save-dev @babel/plugin-transform-modules-umd yarn add --dev @babel/plugin-transform-modules-umd pnpm add --save-dev @babel/plugin-transform-modules-umd bun add --dev @babel/plugin-transform-modules-umd Usage ​ With a configuration file (Recommended) ​ babel.config.json { "plugins" : [ "@babel/plugin-transform-modules-umd" ] } You can also override the names of particular libraries when this module is running in the browser. For example the es6-promise library exposes itself as global.Promise rather than global.es6Promise . This can be accommodated by: babel.config.json { "plugins" : [ [ "@babel/plugin-transform-modules-umd" , { "globals" : { "es6-promise" : "Promise" } } ] ] } Default semantics ​ There are a few things to note about the default semantics. First , this transform uses the basename of each import to generate the global names in the UMD output. This means that if you're importing multiple modules with the same basename, like: JavaScript import fooBar1 from "foo-bar" ; import fooBar2 from "./mylib/foo-bar" ; it will transpile into two references to the same browser global: JavaScript factory ( global . fooBar , global . fooBar ) ; If you set the plugin options to: JSON { "globals" : { "foo-bar" : "fooBAR" , "./mylib/foo-bar" : "mylib.fooBar" } } it will still transpile both to one browser global: JavaScript factory ( global . fooBAR , global . fooBAR ) ; because again the transform is only using the basename of the import. Second , the specified override will still be passed to the toIdentifier function in babel-types/src/converters . This means that if you specify an override as a member expression like: JSON { "globals" : { "fizzbuzz" : "fizz.buzz" } } this will not transpile to factory(global.fizz.buzz) . Instead, it will transpile to factory(global.fizzBuzz) based on the logic in toIdentifier . Third , you cannot override the exported global name. More flexible semantics with exactGlobals: true ​ All of these behaviors can limit the flexibility of the globals map. To remove these limitations, you can set the exactGlobals option to true . Doing this instructs the plugin to: * always use the full import string instead of the basename when generating the global names * skip passing globals overrides to the toIdentifier function. Instead, they are used exactly as written, so you will get errors if you do not use valid identifiers or valid uncomputed (dot) member expressions. * allow the exported global name to be overridden via the globals map. Any override must again be a valid identifier or valid member expression. Thus, if you set exactGlobals to true and do not pass any overrides, the first example of: JavaScript import fooBar1 from "foo-bar" ; import fooBar2 from "./mylib/foo-bar" ; will transpile to: JavaScript factory ( global . fooBar , global . mylibFooBar ) ; And if you set the plugin options to: JSON { "globals" : { "foo-bar" : "fooBAR" , "./mylib/foo-bar" : "mylib.fooBar" } , "exactGlobals" : true } then it'll transpile to: JavaScript factory ( global . fooBAR , global . mylib . fooBar ) ; Finally, with the plugin options set to: babel.config.json { "plugins" : [ "@babel/plugin-external-helpers" , [ "@babel/plugin-transform-modules-umd" , { "globals" : { "my/custom/module/name" : "My.Custom.Module.Name" } , "exactGlobals" : true } ] ] , "moduleId" : "my/custom/module/name" } it will transpile to: JavaScript factory ( mod . exports ) ; global . My = global . My || { } ; global . My . Custom = global . My . Custom || { } ; global . My . Custom . Module = global . My . Custom . Module || { } ; global . My . Custom . Module . Name = mod . exports ; Via CLI ​ Shell babel --plugins @babel/plugin-transform-modules-umd script.js Via Node API ​ JavaScript require ( "@babel/core" ) . transformSync ( "code" , { plugins : [ "@babel/plugin-transform-modules-umd" ] , } ) ; Options ​ allowTopLevelThis ​ boolean , defaults to false . When this option is true , Babel will transform top level this (always undefined in ES Modules) to void 0 . moduleIds ​ boolean defaults to !!moduleId Added in: v7.9.0 Enables module ID generation. moduleId ​ string Added in: v7.9.0 A hard-coded ID to use for the module. Cannot be used alongside getModuleId . getModuleId ​ (name: string) => string Added in: v7.9.0 Given the babel-generated module name, return the name to use. Returning a falsy value will use the original name . moduleRoot ​ string Added in: v7.9.0 A root path to include on generated module names. For options not listed here, see options for @babel/plugin-transform-modules-commonjs . Edit this page Previous SystemJS Next decorators * Example * Installation * Usage * With a configuration file (Recommended) * Via CLI * Via Node API * Options * allowTopLevelThis * moduleIds * moduleId * getModuleId * moduleRoot Docs * Learn ES2015 Community * Videos * User Showcase * Stack Overflow * Slack Channel * X (Twitter) * Bluesky More * Blog * GitHub Org * GitHub Repo * Website Repo * Old 7.x Site * Old 6.x Site * Old 5.x Site