All-around transform for Browserify.
npm install broaderify
The initial motivation comes from the need to inject dependencies into modules that don't import them by themselves - bootstrap 3 for example, and by the flawed approach used by browserify-shim to deal with that problem:
Broaderify adopts a very similar strategy to webpack loaders: it allows full source transformation control based on module name filtering.
import * as Browserify from "browserify";
import broaderify from "broaderify";
Browserify()
.transform(broaderify, {
loaders: [{
filter: /foo.js/,
worker: (module, content, done) => {
// do whatever you want with content
done(content);
}
}]
})
.add('index.js');
Read the documentation for more information.
import * as Browserify from "browserify";
import broaderify from "broaderify";
let bundle = browserify()
.transform(broaderify, {
global: true,
loaders: [{
filter: /node_modules\/bootstrap\/js\/(.*).js/,
worker: (module, content, done) => {
content = 'var jQuery = require(\'jquery\');' + content;
done(content);
}
}]
})
.add('index.js');
Let's take parallax.js jQuery plugin as an example. It is a very good example because it makes the explicit assumption that jQuery is part of the window object:
import * as Browserify from "browserify";
import broaderify from "broaderify";
let bundle = browserify()
.transform(broaderify, {
global: true,
loaders: [{
filter: /node_modules\/parallax-js\/source\/jquery.parallax.js/,
worker: (module, content, done) => {
content = content.replace('window.jQuery || window.Zepto', 'jQuery');
content = 'var jQuery = require(\'jquery\');' + content;
done(content);
}
}]
})
.add('index.js');
Apache-2.0 © Eric MORAND
Generated using TypeDoc