如何在webpack中加载“jquery-1.4.2”作为模块而不修改其源代码

时间:2018-03-14 17:35:55

标签: jquery webpack webpack-3 webpack-loader

我想将jquery-1.4.2jquery-3.x并列。 我将两个脚本的路径别名为:jquery1 / jquery3

对于jquery-3.x,下面的代码有效:

require("imports-loader?jQuery=jquery3!app/some.jquery.myplugin");

但如果我为jquery1做同样的事情:

require("imports-loader?jQuery=jquery1!app/some.jquery.mylegacyplugin");

我在运行时得到:无法设置未定义的属性mylegacyplugin。

我到目前为止找到的唯一解决方案是编辑jquery-1.4.2。文件并在函数末尾添加以下内容:

module.exports=jQuery;

我是否可以使用加载程序来避免编辑jquery的源代码?

1 个答案:

答案 0 :(得分:0)

我创建了一个展示它的repo

安装:npm i exports-loader -D。 我看到您已经安装了imports-loader

我希望您可以修改插件以添加module.exports

<强> myJQueryPlugin.js

$.fn.greenify = function () {
    debugger;
    this.css("color", "green");
    return this;
}

module.exports = $;

添加以下规则:

 module: {
            rules: [        
                {
                    use: "exports-loader?window['jQuery']",
                    test: /jQuery.1.4.2.js$/
                },  

我已经为我的jQuery插件添加了resolve.alias:

 resolve: {
      alias: { // shortcuts             
            "myjqPlugin": path.resolve("src/scripts/plugins/app/myJQueryPlugin.js")),

然后在index.js

// you would probably name this `var` differently:
    var my142jQueryIncludingPlugin = require("imports-loader?$=../../libs/jQuery.1.4.2.js!myjqPlugin");

    my142jQueryIncludingPlugin("*").greenify();

结果:一切都是绿色的: - )