使用gulp、browserify、reactify时transform-es2015-classes插件报错求助

嘿，这个错误的原因很明确——你在配置Babel插件时的语法写错了！

当你需要给Babel插件传递配置参数（比如这里的loose: true），不能把插件名称和配置对象分开作为plugins数组的两个独立元素。正确的写法是把插件名和它的配置对象放在同一个子数组里。

你原来的写法：

plugins: [
 'transform-es2015-classes',
 { loose: true }
]

这种写法会让Babel误以为{ loose: true }是一个独立的插件，而它并不是一个合法的插件名称，所以才会抛出“提供了无效属性loose”的错误。

修正后的代码 #

把插件配置改成嵌套数组的形式就可以解决问题了：

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());
});

另外补充一句：其实es2015预设已经包含了transform-es2015-classes插件，你单独列出来并配置loose模式是没问题的，这样可以覆盖预设里的默认配置。

内容的提问来源于stack exchange，提问作者Steve Waters