Gulp babel con babel-preestablecido-reacciona sin transformar el código JSX - reactjs, gulp, babel, gulp-babel

Estoy teniendo problemas para compilar el código jsx de reacción con trago. Esto es lo que mi gulpfile.js parece -

const gulp = require("gulp");
const babel = require("gulp-babel");

gulp.task("js", () => {
return gulp.src("src/main.js")
.pipe(babel({
presets: ["es2015", "react"]
}))
.pipe(gulp.dest("build"));
});

gulp.task("default", ["js"], () => {
gulp.watch("src/main.js", ["js"]);
});

en mi paquete json archivo

  "devDependencies": {
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
}

cuando pongo el código es2015, se transforma. Pero el código jsx no se está transformando.

Estoy tratando de compilar el siguiente código:

import Hello from "./hello.jsx";
import World from "./world.jsx";


[1,2,3].map(n => console.log(n + 1));

pero solo cumple con los códigos es6 no jsx

"use strict";

var _hello = require("./hello.jsx");

var _hello2 = _interopRequireDefault(_hello);

var _world = require("./world.jsx");

var _world2 = _interopRequireDefault(_world);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

[1, 2, 3].map(function (n) {
return console.log(n + 1);
});

También probé con la webpack y descubrí que babel-preset-react está funcionando pero con gulp-babel no lo es. En el pasado, estaba usando otra herramienta tragamonedas para compilar, pero esta vez quiero usar gulp-babel pero parece que no está funcionando como esperaba.

Cualquier tipo de ayuda es muy apreciada.

Respuestas

Gracias a @sven @hector por señalarme.

Lo conseguí trabajando con mi método tradicional browserify y babelify. Así es como se ve

const gulp = require("gulp");
const browserify  = require("browserify");
const babelify = require("babelify");
const source = require("vinyl-source-stream");

gulp.task("js", () => {
return browserify({ entries: ["src/main.js"] })
.transform(babelify, {presets: ["react", "es2015"]}) // "es2015", "react"
.bundle()
.pipe(source("main.js"))
.pipe(gulp.dest("build"));
});

o si tiene un problema, utilice el paquete web o, en su defecto, use el paquete gulp-webpack.