我如何捆绑需要 jquery ajax 调用的 React 应用程序

Question

我正在使用 ecma6 标准开发一个 React 应用程序。现在我正在使用下面的 gulpfile.js 创建一个要在浏览器中使用的包：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var glob = require('glob');

gulp.task('build', function () {

  browserify({
    entries: 'index.jsx',
    extensions: ['.jsx'],
    debug: true
  })
  .transform(babelify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist'));
});
 
gulp.task('default', ['build']);

现在我有一个使用 jQuery ajax 调用的 React 组件，像这样：

 componentDidMount() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

我如何修改我的 gulp 文件，以便 jquery 代码可以包含在反应代码中？

Answer 1

我可以按照以下步骤在我的代码中使用 jQuery：

1) 使用命令

安装 jquery 包

npm 安装jquery

2) 在要使用的组件中导入包 jQuery with statement

从 'jquery' 导入 $;

我如何捆绑需要 jquery ajax 调用的 React 应用程序

How can i bundle react app that needs jquery ajax call

reactjs

gulp

ecmascript-6

browserify

babeljs