とWYSIWYGテキストエディタのjQueryプラグインをバンドル。 私はほとんどのものを動作させることができましたが、1つの要素については、テキストエディタを使用することができました。 は私がNode.jsの/ WebPACKのプロジェクトに回すよレガシーjqueryの/ブートストラップWebアプリケーション、で働いているのWebPACK
は、もともとこのプロジェクトは 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",
})
]
};
が、正直に言うと、私はこれが問題であるとは思わない - すべての$はすでにjqueryのの「私」バージョン(WebPACKの「ベンダーのバンドル)を指しているの後。あなたがapp.jsのエントリーポイントで言うように私は$が必要であることを確認するために問題は解決されません。 – fbielejec
申し訳ありませんが、私は完全に質問を読んでいないようです。 console.logをjQueryのソースとエラーの場所の直前に置くことができます。 jQueryの前にエディタのコードが実行されるようです。 – andreypopp