使用Browserify为jQuery插件添加Shim

Question

你好，我正在使用grunt browserify任务来设置我的代码，我已经将jQuery添加到shim中，现在我想要包含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: '$',
        }
    }
}

- michael

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

- Ian Lim

---

它没有给我错误，但在 require 调用期间它给了我一个空对象 var $ = require('$'),sorter = require('jquery-tablesorter'); console.log($,sorter); // 它控制台输出 {} {} - Kundu

@kundu，可以告诉我你正在使用哪个grunt-browserify版本吗？这个解决方案只适用于早期版本。 - Ian Lim

@Lim 我正在使用 browserify v5.9.1。对于更新版本，应该采取什么措施？ - Kundu

请查看此文章是否对您有帮助：http://aeflash.com/2014-05/grunt-browserify-2-x-update.html - Ian Lim

shim是从哪里来的？当前的Browserify文档建议使用browserify-shim https://github.com/thlorenz/browserify-shim - mikemaccana

Answer 2

也许如果您使用这个扩展程序，就不需要在package.json中使用"browserify-shim"部分。

您可以像这样操作 使用Browserify与jQuery插件 我尝试过了，它可以运行。 示例

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

- Andriy Lach

---

不太优雅，但我用了这个技巧，它可以工作。你不需要分配给一个变量，只需调用 require("x")。 - Sebastien Lorber

是的，你说得对。Ian Lim 的解决方案可能更好。 - Andriy Lach

Answer 3

使用全局的JQuery然后再引入你的模块会更容易，而且不需要更改package.json文件：

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

- Thomas Modeneis