需要帶有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' 
     }), 
    ] 
}