Shim a jQuery plugin with browserify

Question

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 this way?

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

score 14 · Accepted Answer · answered Jan 22 '14 at 01:38

14

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',
        }
    }
}

answered Jan 22 '14 at 01:38

Ian Lim

4,164
3
29
43

It does not give me error but during require call it gives me a blank object var $ = require('$'),sorter = require('jquery-tablesorter'); console.log($,sorter); // it consoles {} {} – Kundu Sep 22 '14 at 14:29
@kundu may I know which grunt-browserify version are u using? This solution only works for an earlier version. – Ian Lim Sep 23 '14 at 01:34
@Lim I am using browserify v5.9.1. For the newer version what should be the way out. – Kundu Sep 23 '14 at 06:08
see if this article is helpful to you http://aeflash.com/2014-05/grunt-browserify-2-x-update.html – Ian Lim Sep 23 '14 at 13:46
2

Where does `shim`come from? Current browserify docs say to use `browserify-shim` https://github.com/thlorenz/browserify-shim – mikemaccana Jan 05 '15 at 16:53

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

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

edited May 23 '17 at 12:16

Community

1
1

answered Mar 16 '15 at 14:57

Andriy Lach

121
1
5

Not elegant but I used this trick and it works. You don't have to assign to a variable, just call `require("x")` – Sebastien Lorber Apr 15 '15 at 13:33
Yes, you're right. Also solution from Ian Lim may be better. – Andriy Lach Apr 25 '16 at 17:01

score 0 · Answer 3 · answered Sep 04 '16 at 12:22

0

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');

answered Sep 04 '16 at 12:22

Thomas Modeneis

687
8
11

Shim a jQuery plugin with browserify

3 Answers3

Linked