我如何捆绑需要 jquery ajax 调用的 React 应用程序
How can i bundle react app that needs jquery ajax call
我正在使用 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 代码可以包含在反应代码中?
我可以按照以下步骤在我的代码中使用 jQuery:
1) 使用命令
安装 jquery 包
npm 安装jquery
2) 在要使用的组件中导入包 jQuery with statement
从 'jquery' 导入 $;
我正在使用 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 代码可以包含在反应代码中?
我可以按照以下步骤在我的代码中使用 jQuery:
1) 使用命令
安装 jquery 包npm 安装jquery
2) 在要使用的组件中导入包 jQuery with statement
从 'jquery' 导入 $;