我有一个gulp任务来运行webpack来捆绑我的文件。我尝试将jQuery与typeahead.js一起使用,但调用里面的 typeahead.js文件似乎是在加载一个新的jQuery对象,而不是使用一个在"全球"范围由require('jquery')
创建。 如何将jQuery插件添加到ProvidePlugin
创建的jQuery实例中?
这是我的gulp任务:
ProvidePlugin
在导入的模块中:
gulp.task("bundlejs", function(cb) {
pump([
gulp.src("js/index.js"),
webpack({
output: { filename: BUNDLE_NAME },
plugins: [
new webpack.webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
devtool: 'source-map'
}),
gulp.dest(OUTPUT_JS)
], cb);
});
只是为了获得一些额外的信息,typeahead包的顶部看起来像这样(full file here):
require("imports-loader?define=>false!typeahead.js");
console.info($.fn.typeahead); // <== prints 'undefined'
我做错了什么?
根据评论流,以下是我使用我的唯一ID代码获得的信息。
这是我的/path/to/unique-id.js文件:
(function(root, factory) {
if (typeof define === "function" && define.amd) {
define("bloodhound", [ "jquery" ], function(a0) {
return root["Bloodhound"] = factory(a0);
});
} else if (typeof exports === "object") {
module.exports = factory(require("jquery")); // <== this line gets called
} else {
root["Bloodhound"] = factory(jQuery);
}
})( ... );
使用var id = 0;
module.exports = function(o) {
if (typeof o.__uniqueid == "undefined") {
Object.defineProperty(o, "__uniqueid", {
value: ++id,
enumerable: false,
writable: false
});
}
return o.__uniqueid;
};
...
在我的Application.js文件中(我使用var u = require('/path/to/unique-id.js')
的文件:
require("imports-loader?define=>false!typeahead.js")
我修改了typeahead.bundle.js以包含一些调用:
console.info(u($)); // <== prints 1
console.info(u(jQuery)); // <== prints 1
console.info(u(window.jQuery)); // <== prints 1
console.info(u(require('jquery'))); // <== prints 1
本着积极解决问题和透明度的精神,我让它以这种方式工作:
(function(root, factory) {
if (typeof define === "function" && define.amd) {
define("bloodhound", [ "jquery" ], function(a0) {
return root["Bloodhound"] = factory(a0);
});
} else if (typeof exports === "object") {
console.info(u(window.$)); // <== this prints 1, like I want
console.info(u(require('jquery')); // <== this prints 2
console.info(u(require('jquery')); // <== this prints 2
module.exports = factory(require("jquery")); // <== original module code
} else {
root["Bloodhound"] = factory(jQuery);
}
})( ... );
我根本不喜欢这种方式,所以任何其他答案都会受到赞赏。
我最终切换到selectize并且不得不使用一个更平稳的解决方案,但我认为它可能会帮助其他人遇到与我相同的问题:
在模块中:
require("imports-loader?exports=>false,define=>false,jQuery=>window.$!typeahead.js");
这迫使我的模块中使用的jQuery(显然是ProvidePlugin)加入了将选择插件添加到jQuery的函数。