需要一个与Webpack兼容的jQuery插件。

Question

我希望使用Webpack将所有所需的JavaScript文件合并成一个名为scripts.js的文件。

在我的main.js中，我需要引用三个模块：

require('jquery');
require('readmore');
require('foundation');

我的webpack.config.js文件如下：

var path = require('path');

module.exports = {
    entry: ["./js/main.js"],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "scripts.js"
    },
    resolve: {
        modulesDirectories: ["bower_components", "node_modules"],
        alias: {
            jquery: '../bower_components/jquery/dist/jquery.js',
            readmore: '../node_modules/readmore-js/readmore.js',
            foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
        }
    }
}

我遇到的问题是：readmore-js 是一个 jQuery 插件，因此它本身需要 jQuery。在运行 Webpack 后，我遇到了以下错误：

ERROR in ./~/readmore-js/readmore.js
Module not found: Error: Can't resolve 'jquery' in '/Users/myName/www/myProject/node_modules/readmore-js'
 @ ./~/readmore-js/readmore.js 17:4-31
 @ ./js/main.js
 @ multi main

据我所知，问题在于readmore还想在“nodes_modules”目录中加载jQuery模块。我的第一个解决方法是通过在配置文件中添加moduleDirectories来解决这个问题，但它仍然无法工作。即使在这种情况下，该插件也不应再次加载jQuery。

您有任何想法如何全局加载jQuery，然后“告诉”所有需要jQuery的模块“看，它在那里！”如果可能的话，请参考以下从插件的readmore.js中复制出的内容：

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}

- to7be

Answer 1

您可以使用 webpack.ProvidePlugin 来实现这一点：

从 main.js 中删除 require jquery：

require('readmore');
require('foundation');

在webpack.config.js文件中配置webpack.ProvidePlugin：

var path = require('path');

module.exports = {
    entry: ["./js/main.js"],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "scripts.js"
    },
    resolve: {
        modulesDirectories: ["bower_components", "node_modules"],
        alias: {
            readmore: '../node_modules/readmore-js/readmore.js',
            foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
        }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
    ]
}

- Tom Van Rompaey

---

谢谢您的回复，webpack命令可行！ 但我在运行scripts.js时遇到了问题，无法再访问插件： at Object. [...] ``` 我认为我仍然存在全局变量的问题？ - to7be

我遇到了类似的问题。一些插件被加载，而另一些则没有，这真是个谜。我有一个现有的项目，但就是无法弄清楚为什么有些能用而有些不能。 - Wouter