如何在不修改其源代码的情况下将 "jquery-1.4.2" 作为 webpack 中的模块加载

Question

我想同时包含 jquery-1.4.2 和 jquery-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 源代码的加载程序？

Answer 1

我创建了一个 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();

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

如何在不修改其源代码的情况下将 "jquery-1.4.2" 作为 webpack 中的模块加载

How can I load "jquery-1.4.2" as a module in webpack without modifying its source

jquery

webpack

webpack-3

webpack-loader