jquery-plugins - 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'
      }),
    ]
}