Shim A Jquery Plugin With Browserify

Hi I'm using the grunt browserify task to setup my code, I have shimmed in jQuery and I'm now trying to include jquery.tablesorter. Can jquery plugins be used with browserify in th

Solution 1:

You may try by doing this:

shim: {
    jquery: {
        path:'lib/bower/jquery/jquery.js',
        exports:'$'
    },
    'jquery.tablesorter': {
        path:'lib/bower/jquery.tablesorter/js/jquery.tablesorter.js',
        exports:null,
        depends: {
            jquery:'$',
        }
    }
}

If the above is not working, you can try this:

shim: {
    jquery: {
        path:'lib/bower/jquery/jquery.js',
        exports:null
    },
    'jquery.tablesorter': {
        path:'lib/bower/jquery.tablesorter/js/jquery.tablesorter.js',
        exports:null,
        depends: {
            jquery:'jQuery',
        }
    }
}

Solution 2:

Maybe you dont need to use "browserify-shim" section in package.json if you use this extention.

You can do like here Using Browserify with jQuery Plugins

I've tried it and it works.

Example

package.json

"browserify": {
    "transform": ["browserify-shim"]
},
"browser": {
     "jQuery.translit": "./public_html/js/vendor/jquery/jquery.translit.js"
},
"browserify-shim": {
    "jQuery": "global:jQuery"
}

JS file:

var $ = require("jQuery"),
    translit = require("jQuery.translit"),  //don't use this variable      
    heading = require("./helper/heading.js");
$.transliterate("parameter"); //use as regular jQuery plugin instead

Solution 3:

Its much easier to require global.JQuery and then require your module, it require no changes to package.json:

global.jQuery = require('jquery');
require('tipso');