关于webpack引入JQuery插件的问题

问题描述

问 题

我的webpackconfig现在用的是

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

引入的jquery, 然后我的插件是直接require的，但编译的时候老是说插件里的jQuery 未定义, 我看官网提供的 ProvidePlugin 应该是指出现这些表示的话会自动去加载，不知道怎么解决，求帮助谢谢

组件里的代码：

我在组件里

    import React , {Component} from 'react'
    import ReactDOM from 'react-dom'
    require('../../lib/plugins/nivo.js');
    require('./index.styl');
    
    class Slider extends Component {
      componentDidMount(){
        this.props.onLoad();
      }
    
      componentDidUpdate(){
        this.initEvent();
      }
    
      initEvent(){
        let $el = $(ReactDOM.findDOMNode(this));
        $el.nivoSlider({
          controlNav: false,
          directionNav: false
        });
      }
    
      render(){
        if(this.props.focus.data){
          return (
            <div className="slider nivoSlider">
            {this.props.focus.data.results.map(item =>
              <img src={item.url} key={item.url} />
            )}
            </div>
          )
        }else{
          return null;
        }
      }
    }

export default Slider

插件nivo.js

 
(function($) {
    var NivoSlider = function(element, options) {
        // Defaults are below
        var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

    .....
    .....    

    $.fn._reverse = [].reverse;

})(jQuery);

编译后就报undefine，但我刚才把这个插件放到入口文件上居然没有报错，不太理解为什么

解决方案

1 保证你的node_modukes里已经安装过jquery
2 把 jQuery: 'jquery' 也加进去再试下

这篇关于关于webpack引入JQuery插件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！