Wrap a browserify/browser-pack JavaScript bundle in a Universal Module Definition (UMD) with optional external dependencies, while preserving source maps.
Plug this into your build chain just as you would with any other transform-stream:
browserify src/main.js | youemdee MyModule --dependency dep1
Or if you're using the Node API:
browserify('./src/main.js')
.bundle()
.pipe(youemdee.createTransform('MyModule', dependencies))
.pipe(process.stdout)
youemdee
Reads a browserify/browser-pack JavaScript bundle from stdin and wraps it in a Universal Module Definition (UMD) with optional external dependencies. An optional source map can be provided inline in the input, and will be updated and output inline with the UMD bundle on stdout.
Synopsis
$ youemdee <module-name>
It is highly encouraged to stick to [a-zA-Z] for module-name, as anything else will make accessing your module in the global scope more difficult (window.MyModule vs. window['my-module']).
Options
-h, --help Display this usage guide
-d, --dependency A dependency in the form of name[:global[:amd]], multiple occurrences allowed
Examples
No external dependencies $ youemdee MyModule < bundle.js
React and ReactDOM as external deps. $ youemdee MyComponent --dependency react:React --dependency react-dom:ReactDOM < bundle.js
const youemdee = require('youemdee')
Will wrap source
in a UMD. If there is an inline source map found in source
it will be extracted, updated to reflect the changes made, then reattached inline to the returned string.
moduleName
is the namespace which the module will have when attached to the global scope, e.g. window.MyModule
. It is highly encouraged to stick to [a-zA-Z] so as not to make accessing your module unnecessarily difficult.
The optional dependencies
is an array. Each entry can either be a string or a dependency spec of the following form:
{
name: String, // The internal and external CJS name
amd: String, // Dep. name as defined in the AMD loader
global: String, // Dep. name in the global scope
}
When specified as a string the value will be used for internal, external, amd, and global dependency names.
Just like youemdee()
, but instead of expecting source as an argument it returns a transform stream which reads until end, wraps in a UMD, and emits the updated bundle. Very useful in a stream-style build pipeline.
browserify's --standalone
works well as long as you don't have any external dependencies. umd itself (which browserify uses indirectly via browser-pack) doesn't yet support external dependencies.
This tool targets browserify (or more specifically: browser-pack) bundles. It will, in theory, also work for other JavaScript bundlers that create a similar pseudo-require
output. PRs to add support for other types of input are more than welcome.
Node >=6. This is only due to the level of syntactic sugar used. Writing the code down to support older versions of node won't be too much work, if the demand is there to support it.
ISC