Allows regular JavaScript files to expose global variables and functions when bundled with Browserify.
We can find old code written this way:
-
jquery.js:
function jQuery(selector) { /* ... */ }
-
test.js:
var $element = jQuery('#some-element');
When we bundle the file with the jQuery definition, we loose the global reference to jQuery because it is no longer declared in the top level scope:
browserify jquery.js -o jquery.bundled.js-
jquery.bundled.js:
/* PREAMBLE */ })({ 1: [ function(require, module, exports) { // jQuery is not global now! function jQuery(selector) { /* ... */ } }, {} ] }, {}, [1]);
This module transforms those files exposing those variables to window:
browserify jquery.js -t windowify -o jquery.bundled.js-
jquery.bundled.js:
/* PREAMBLE */ })({ 1: [ function(require, module, exports) { (function(window) { function jQuery(selector) { /* ... */ } // jQuery is global again! window.jQuery = exports.jQuery = jQuery; }).call(window, window); }, {} ] }, {}, [1]);
It also sets window as the context of the code (for code setting global variables to this).
npm install windowify --save-devLike any other browserify transform, you can use in 3 ways:
- Adding the configuration to the
package.json:
{
"browserify": {
"transform": [
["windowify", ["**/jquery.js"]]
]
}
}- Command-line usage:
browserify entry-point.js -t [ windowify **/jquery.js ] -o entry-point.bundle.js- Programmatic usage:
var b = browserify('entry-point.js');
b.transform('windowify', ['**/jquery.js']);- Fork it:
git clone https://github.com/rubennorte/blister.git - Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Check the build:
npm run build - Push to the branch:
git push origin my-new-feature - Submit a pull request :D