javascript - 用 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

您可以尝试这样做：

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

Answer 2

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

你可以在这里使用带有 jQ​​uery 插件的 Browserify

我已经尝试过了，它有效。

例子

包.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

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

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