0.3.0 • Published 9 years ago

windowify v0.3.0

Weekly downloads
30
License
MIT
Repository
github
Last release
9 years ago

Windowify

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).

Installation

npm install windowify --save-dev

Usage

Like any other browserify transform, you can use in 3 ways:

  • Adding the configuration to the package.json:
{
  "browserify": {
    "transform": [
      ["windowify", {"files": "**/jquery.js", "debug": true}]
    ]
  }
}
  • Command-line usage:
browserify entry-point.js -t [ windowify **/jquery.js --debug ] -o entry-point.bundle.js
  • Programmatic usage:
var b = browserify('entry-point.js');
b.transform('windowify', {files: '**/jquery.js', debug: true}]);

Contribute

  1. Fork it: git clone https://github.com/rubennorte/windowify.git
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Check the build: npm run build
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request :D