需要一个带有 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);
  }
}

Answer 1

您可以为此使用webpack.ProvidePlugin：

从main.js中删除需要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'
      }),
    ]
}