我需要将所有 /src/ .jsx 文件转换为 /src/ .js
在我使用 gulp-react 之前：
var react = require('gulp-react');
gulp.task('jsx', function () {
return gulp.src('src/jsx/*.jsx')
.pipe(react())
.pipe(gulp.dest('src/js/'));
});
它有效，但并非没有一些小错误。当我使用 Babel 网站（https://babeljs.io/repl/）时，所有转换都正确。你可以帮帮我吗。如何设置 gulp 来转换 .JSX 文件？
首先你需要安装这两个包：
npm install gulp-babel babel-plugin-transform-react-jsx
然后你可以像这样转换：
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("babel", function(){
return gulp.src("src/jsx/*.jsx").
pipe(babel({
plugins: ['transform-react-jsx']
})).
pipe(gulp.dest("src/js/"));
});
为了在转换时自动插入 displayName，你需要安装 gulp-babel 和React preset：
npm install --save-dev gulp-babel babel-preset-react
然后在 gulpfile.js 中：
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("jsx", function(){
return gulp.src("src/jsx/*.jsx")
.pipe(babel({
presets: ["react"]
}))
.pipe(gulp.dest("src/js"));
});
gulp.task('build', ['copy'], function() {
gulp.src([
'src/**/*.jsx',
'src/**/*.js',
'!./node_modules/**'
])
.pipe(babel({
presets: ['es2015', 'react']
}))
.pipe(gulp.dest('app'));
});
因为我也在使用 ES6。
对于使用Babel 7 的最新React v16.8.x，使用和module。@babel/preset-env@babel/preset-react
npm i -D @babel/preset-env @babel/preset-react
然后在你的gulpfile.js 中：
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("whatever_task_name_you_prefer", function(){
return gulp.src("src/jsx/*.jsx")
.pipe(babel({
presets: ["@babel/preset-env", @babel/preset-react"]
}))
.pipe(gulp.dest("dist"));
});