Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@babel/plugin-transform-modules-umd
Advanced tools
This plugin transforms ES2015 modules to UMD
The @babel/plugin-transform-modules-umd package is a Babel plugin that transforms ES2015 modules to UMD (Universal Module Definition) format. This allows the modules to be used in various environments, such as in the browser, Node.js, or AMD (Asynchronous Module Definition) environments. The plugin provides flexibility in module usage across different platforms by wrapping the code in a UMD wrapper.
Transform ES2015 modules to UMD
This feature allows developers to write their JavaScript modules using the modern ES2015 module syntax and then transform them into UMD format. The transformed code can be executed in various environments without modification. The code sample shows a simple module exporting a string, transformed into UMD format.
"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.default = void 0;\n\nvar _default = 'Hello World';\n\nexports.default = _default;\nmodule.exports = exports["default"];
Similar to @babel/plugin-transform-modules-umd, this package transforms ES2015 modules to AMD (Asynchronous Module Definition) format. While @babel/plugin-transform-modules-umd targets multiple environments, @babel/plugin-transform-modules-amd specifically targets AMD-compatible loaders.
This package transforms ES2015 modules to CommonJS format, making them suitable for use in Node.js environments. It is similar to @babel/plugin-transform-modules-umd in that it deals with module transformation, but it focuses on CommonJS format instead of UMD.
This Babel plugin transforms ES2015 modules to SystemJS format, a dynamic module loader that can load modules in multiple formats. It is similar to @babel/plugin-transform-modules-umd in its goal to make modules usable in different environments, but it specifically targets SystemJS-compatible environments.
This plugin transforms ES2015 modules to Universal Module Definition (UMD).
In
export default 42;
Out
(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;
});
npm install --save-dev @babel/plugin-transform-modules-umd
.babelrc
(Recommended).babelrc
{
"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:
{
"plugins": [
["@babel/plugin-transform-modules-umd", {
"globals": {
"es6-promise": "Promise"
}
}]
]
}
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:
import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";
it will transpile into two references to the same browser global:
factory(global.fooBar, global.fooBar);
If you set the plugin options to:
{
"globals": {
"foo-bar": "fooBAR",
"./mylib/foo-bar": "mylib.fooBar"
}
}
it will still transpile both to one browser global:
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:
{
"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.
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:
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.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:
import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";
will transpile to:
factory(global.fooBar, global.mylibFooBar);
And if you set the plugin options to:
{
"globals": {
"foo-bar": "fooBAR",
"./mylib/foo-bar": "mylib.fooBar"
},
"exactGlobals": true
}
then it'll transpile to:
factory(global.fooBAR, global.mylib.fooBar)
Finally, with the plugin options set to:
{
"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:
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;
babel --plugins @babel/plugin-transform-modules-umd script.js
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-modules-umd"]
});
FAQs
This plugin transforms ES2015 modules to UMD
The npm package @babel/plugin-transform-modules-umd receives a total of 18,292,490 weekly downloads. As such, @babel/plugin-transform-modules-umd popularity was classified as popular.
We found that @babel/plugin-transform-modules-umd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.