I try to use transform-es2015-classes plugin with gulp, browserify, reactify.
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
var reactify = require('reactify');
var util = require('gulp-util');
gulp.task("reactcompile", function () {
// app.js is your main JS file with all your module inclusions
return browserify({entries: './src/main/app/reactjs/react-app.js', debug: true})
.transform("babelify",
{
plugins: [
'transform-es2015-classes', { loose: true }
],
presets: ["es2015", "react", "stage-0"]
})
.bundle()
.on('error', util.log.bind(util, 'Browserify Error'))
.pipe(source('react-app.js'))
.pipe(buffer())
.pipe(gulp.dest('./build'))
.pipe(livereload());
});
As I run gulp, I get the error:
[12:06:45] Browserify Error { Error: Plugin 1 specified in "base" provided an invalid property of "loose" while parsing file: mypath\react-app.js
Is my syntax wrong or what is the problem?
You're missing a set of []
s.
plugins: [
'transform-es2015-classes', { loose: true }
]
should be
plugins: [
['transform-es2015-classes', { loose: true }]
]
so the plugin and its arguments are a single item in the plugins
array.