用 browserify 填充一个 jQuery 插件

Question

您好，我正在使用 grunt browserify 任务来设置我的代码，我已经在 jQuery 中填充，现在我正在尝试包含 jquery.tablesorter。

jquery插件可以这样和browserify一起使用吗？

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

Answer 1

需要 global.JQuery 然后需要你的模块要容易得多，它不需要对 package.json 进行任何更改：

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

Answer 2

如果你使用这个扩展，也许你不需要在 package.json 中使用“browserify-shim”部分。

你可以在这里Using Browserify with jQuery Plugins

我试过了，效果很好。

示例

package.json

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

JS 文件：

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

Answer 3

您可以尝试这样做：

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

如果上述方法不起作用，你可以试试这个：

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