Shim a jQuery plugin with browserify

吃可爱长大的小学妹 提交于 2019-11-29 07:53:13

问题


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

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



回答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



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


来源:https://stackoverflow.com/questions/21265814/shim-a-jquery-plugin-with-browserify

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!