How to use both gulp -babel 'and' gulp -browserify '

Question

I am trying to write this code

gulp.task('script', function() { 'use strict' return gulp.src(['app.js', 'components/**/*.jsx']) .pipe(babel()) .pipe(browserify()) .pipe(gulp.dest("dist")); }); 

but it shows some error:

 SyntaxError: /Users/Zizy/Programming/learn-react-js/components/CommentBox.jsx:58 <div className="commentBox"> ^ ParseError: Unexpected token at wrapWithPluginError (/Users/Zizy/Programming/learn-react-js/node_modules/gulp-browserify/index.js:44:10) 

It seems that before .pipe(browserify()) gulp did not convert the jsx code. But if I just delete .pipe(browserify()) , I find that I converted, I just can't let babel and the browser work together.

I know, maybe I can use either babelify or browserify plugin for babel , although I just want to find out the reason.

Answer 1

gulp -browserify does not work like that. You do not give him a bunch of buffers for collecting and binding.

You give it one file - the recording file - mdash, which it passes to Browserify. The browser checks which other files refer to the recording file, and then downloads these files directly from the file system, which means that you cannot pre-modify them using gulp plugins.

So, really, if we pretend that you do not want to use Babel in your source files, your gulpfile should look like this only by writing in the file:

  gulp.task('script', function() { 'use strict' return gulp.src('app.js') .pipe(browserify()) .pipe(gulp.dest("dist")); }); 

However, note that gulp -browserify is no longer supported, and that is why. Gulp plugins should not be read directly from the file system. This is why you should use Browserify (or, in your case, Babelify) directly with a vinyl stream source as recommended in gulp recipes . This is more idiomatic and less confusing.

This concludes my answer to your question, but I would like to add: if you are using ES2015 module syntax (and you probably should be), there is a better way to do this. Browserify wraps all your modules separately in a bunch of code so that the software CommonJS API works correctly, but ES2015 modules have declarative syntax, which greatly simplifies their work with them statically. It uses a tool called Rollup , which allows it to create packages that are smaller, faster, and more convenient than browsers.

Here you can use it with gulp:

 var gulp = require('gulp'), rollup = require('rollup-stream'), babel = require('gulp-babel'), source = require('vinyl-source-stream'), buffer = require('vinyl-buffer'); gulp.task('script', function() { return rollup({entry: 'app.js'}) .pipe(source('app.js')) .pipe(buffer()) .pipe(babel()) .pipe(gulp.dest('dist')); }); 

Answer 2

Starting with Babel 6 you need to declare presets manually, check this .

Basically, at the root of your project you need .babelrc with the following contents:

 { "presets": [ "es2015", "react" ] } 

And the corresponding npm modules in package.json:

 // package.json { "devDependencies": { ... "babel-preset-es2015": "^6.1.18", "babel-preset-react": "^6.1.18", ... } }