WebpackでjQueryプラグインを要求する

Question

Webpackを使用して、必要なすべてのJavascriptファイルから1つのファイル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をconfig-fileに追加することでこの問題を解決することでしたが、それでも動作しません。 この場合でも、プラグインはjQueryを再度読み込むべきではありません。

jQueryをグローバルにロードして、jQueryを必要とするすべてのモジュールを「見て、そこにある」と言うことができますか？それは助けているよう

、次はからコピーされたプラグインのreadmore.js：

あなたはこのために webpack.ProvidePluginを使用することができます

(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

：

削除がmain.jsからjqueryのを必要とする：

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

webpack.ProvidePluginを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: { 
      readmore: '../node_modules/readmore-js/readmore.js', 
      foundation: '../bower_components/foundation-sites/dist/js/foundation.js' 
     } 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
     }), 
    ] 
}