Browserify-Shim jquery

This example demonstrates shimming jquery by adding all shim information to the package.json.

The following config included in the package.json of this example project is needed to ensure that browserify runs the browerify-shim transform when bundling this project.

{ 
  "main": "./js/entry.js",
  "browser": {
    "jquery": "./js/vendor/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  }
}

Bundling via the command line

Given this config you can build the bundle via:

browserify -d . > js/bundle.js

demonstrated here.

If you want to turn on browserify shim diagnostics messages set the BROWSERIFYSHIM_DIAGNOSTICS environment variable when bundling i.e.:

BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . > js/bundle.js

demonstrated here.

Note that in both cases the -d flag is added as well in order to turn on browserify sourcemaps.

Note . tells browserify to use the current dir as the root of the bundling chain. As a result it finds "main": "./js/entry.js" in the package.json and thus uses that as the entry point.

Bundling via a .js script

Alternatively you can write a short build.js to perform the bundling step:

  browserify()  
    .require(require.resolve('./'), { entry: true })
    .bundle({ debug: true })
    .on('error', console.error.bind(console)) 
    .pipe(fs.createWriteStream(path.join(__dirname, 'js', 'bundle.js'), 'utf8'))

demonstrated here.

To run this example:

npm install browserify-shim
npm explore browserify-shim

Then:

npm run shim-jquery

Or to see diagnostic messages:

npm run shim-jquery-diag