は私がNode.jsの/ WebPACKのプロジェクトに回すよレガシーjqueryの/ブートストラップWebアプリケーション、で働いているのWebPACK

Question

とWYSIWYGテキストエディタのjQueryプラグインをバンドル。 私はほとんどのものを動作させることができましたが、1つの要素については、テキストエディタを使用することができました。

は、もともとこのプロジェクトは this editorを使用していないが、それはもはや維持されていますし、私はそれがとにかくgithubのからインストールNPMに得ることができませんでした。これは私がgoogle-fuをドロップインの交換のために始めたときで、 thisが見つかりました。

グローバル名前空間でハンドルバーとランジーが必要でしたが、これは最後ではありませんでした。 どんなに私がこれまで試したものを、私はエラーを乗り越えることはできません。

vendor.bundle.js:13993 Uncaught TypeError: Cannot read property 'fn' of undefined 

と、問題のある行を読み取ります

$.fn.wysihtml5 

jqueryのがあるので、これは、私が理解していないものですグローバル名前空間で、どうしてそれが「未定義」になっていますか？

var App = function() { 

    var uiInit = function() { 

     $('.textarea-editor').wysihtml5(); 

    }; 

    return { 
     init: function() { 
      uiInit(); 
     } 

    }; 
}(); 

$(function(){ App.init(); }); 

package.json：

{ 
    "name": "wysihtml-problem", 
    "version": "1.0.0", 
    "description": "", 
    "main": "app.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "fbielejec", 
    "license": "LGPL", 
    "dependencies": { 
    "jquery": "^2.2.0", 
     "handlebars": "^4.0.5", 
     "rangy": "^1.3.0", 
    "bootstrap3-wysihtml5-commonjs": "0.0.4" 
    }, 
    "devDependencies": { 
    "html-webpack-plugin": "^2.7.1", 
    "webpack": "^1.12.11", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

webpack.config.js：jQueryの環境をイントロスペクトしようとすると、それは見ている場合は、グローバル名前空間を汚染しないように見えます

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = { 

    entry: { 
    app: "./app.js", 
    vendor: ["jquery", "rangy", "wysihtml5"], 
    }, 

    output: { 
    path: __dirname + '/dist', 
    filename: "bundle.js" 
    }, 

    resolve: { 
    alias: { 
     handlebars: 'handlebars/dist/handlebars.min.js', 
     rangy: "rangy/lib/rangy-core.js", 
     wysihtml5: "bootstrap3-wysihtml5-commonjs", 
    } 
    }, 

    plugins: [ 
    new HtmlWebpackPlugin({ 
     title: "wysihtml-webpack" 
    }), 
    new webpack.optimize.CommonsChunkPlugin(chunkName = "vendor", filename = "vendor.bundle.js"), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     'window.jQuery': "jquery", 
     rangy: "rangy", 
    }) 
    ] 

}; 

Answer 1

環境にはモジュールシステムがあります（Webpackからのものが見つかります）。

使用jQueryオブジェクトへの参照を取得するには、このコードを：

var $ = require('jquery') 

また、手動でwindowに$を割り当てることができます。

window.$ = require('jQuery') 

が、それはにつながるとして、最初のオプションを使用するとより好ましいですメンテナンス可能なコードを提供し、さらに最適化を可能にします（たとえば、モジュールがjQueryを使用し、バンドルを複数のチャンクに分割するなど）。このために探してあなたより