I'm having issue to compile react jsx code with gulp. Here is what my gulpfile.js
looks like -
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']);
});
in my package json file
"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"
}
when i put es2015 code it does transform. But jsx code isn't transforming.
I am trying to compile following code -
import Hello from './hello.jsx';
import World from './world.jsx';
[1,2,3].map(n => console.log(n + 1));
but it complies only es6 codes not 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);
});
I also tried with webpack and found out that babel-preset-react
is working but with gulp-babel
it is not. In previous i was using another gulp tool to compile but this time i want to use gulp-babel but seems it's not working as expected.
Any kind of help is highly appreciated.
Thanks to @sven @hector to point me out.
I got it working with my traditional method browserify and babelify. Here is what it's look like
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'));
});
or if you are having problem then use webpack or for gulp fan use gulp-webpack