webpack과 함께 wysiwyg 텍스트 편집기 jquery 플러그인 번들

Question

나는 기존 jquery/bootstrap webapp을 사용하고 있는데, 이것은 node.js/webpack 프로젝트로 바뀌고 있습니다. 나는 그것의 대부분을 작동시킬 수 있었지만 하나의 요소 인 wysiwyg 텍스트 편집기를 사용할 수있었습니다.

원래이 프로젝트는 this editor을 사용했지만 더 이상 유지 관리되지 않으며 어쨌든 nith가 github에서 설치할 수 없습니다. 이것은 내가 google-fu를 drop-in replacement로 시작했을 때 this을 찾은 때입니다.

전역 네임 스페이스에서 핸들 막대와 렁이 필요했지만이 부분이 끝나지 않았습니다. JQuery와이기 때문에, 이것은 내가 이해하지 못하는 것입니다

$.fn.wysihtml5 

:

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

을하고 문제가되는 줄을 읽 상관없이 지금까지 시도 무엇을, 나는 오류가 과거를 얻을 수 없습니다 전역 네임 스페이스에서 어떻게 '정의되지 않았'습니까?

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에서 찾은 것).

window.$ = require('jQuery') 

하지만 첫 번째 옵션을 사용하여 더 많은이 리드로 선호된다 : 당신은 수동으로 $window에 할당 할 수 있습니다

var $ = require('jquery') 

: jQuery를 개체에 대한 참조를 취득

사용이 코드 유지 보수가 가능한 코드를 사용하고 더 많은 최적화가 가능합니다 (예 : 모듈이 jQuery를 사용하고 번들을 여러 개의 청크로 분할하는 webpack).