webpack reactjs 如何引入jquery

Question

我的 webpack.config.js加了插件

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

Component

import React , {Component} from 'react'
import ReactDOM from 'react-dom'
require('./index.styl');

class Slider extends Component {
  componentDidMount(){
    this.props.onLoad();
  }

  initEvent(){
    $(body).html()
    alert('initEvent1');
  }

  render(){
    if(this.props.focus.data){
      this.initEvent();
      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

我这里会报错 Uncaught (in promise) ReferenceError: $ is not defined
官网说不用再require('jquery')了，不知为什么报错？

Answer 1

require 就像当于ES6中的import ，所以import $ from jquery

Answer 2

entry: {
    //其他模块//////
    vendor: ['react', 'react-dom', 'react-router', 'jquery']
}

new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

你这大概是代码问题吧, 把jq相关操作放到componentDidMount

Answer 3

你看你html page引入的js文件中，有jquery这个东西吗。我有点记不清了，我记得好像不需要额外的操作，但是看起来好像是你没有把jquery打到js的包里面

Answer 4

npm安装jQuery了吗？看下package.json里面有没有"jquery": "^2.2.1"

没有的话加上再试试 npm install --save-dev jquery

Answer 5

推荐expose-loader 参看https://webpack.js.org/loader...

Answer 6

楼主，这个问题解决了？本人也遇到这个问题

Answer 7

import $ from 'jquery'