需要带有Webpack的jQuery插件

Question

我想要使用Webpack来创建一个单一的scripts.js文件中所有需要的Javascript文件。

在我的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此：

删除要求的jQuery从main.js：

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