Webpack:在ProvidePlugin

时间:2018-02-21 12:55:20

标签: javascript jquery webpack gulp

我有一个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

更新2(跛脚解决方案)

本着积极解决问题和透明度的精神,我让它以这种方式工作:

(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);
    }
})( ... );

我根本不喜欢这种方式,所以任何其他答案都会受到赞赏。

更新3(使用其他库的另一种解决方案)

我最终切换到selectize并且不得不使用一个更平稳的解决方案,但我认为它可能会帮助其他人遇到与我相同的问题:

在模块中:

require("imports-loader?exports=>false,define=>false,jQuery=>window.$!typeahead.js");

这迫使我的模块中使用的jQuery(显然是ProvidePlugin)加入了将选择插件添加到jQuery的函数。

0 个答案:

没有答案