Browserify Error { Error: Plugin 1 specified in "base" provided an invalid property of "loose" while parsing file: mypath\react-app.js

Question

我尝试将 transform-es2015-类插件与 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());
});

当我运行 gulp 时，我得到错误：

[12:06:45] Browserify 错误 { 错误："base" 中指定的插件 1 解析文件时提供了 "loose" 的无效属性：mypath\react-app.js

是我的语法错误还是有什么问题？

Answer 1

您缺少一组 []s。

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

应该是

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

因此插件及其参数是 plugins 数组中的单个项目。

Browserify Error { Error: Plugin 1 specified in "base" provided an invalid property of "loose" while parsing file: mypath\react-app.js

Browserify Error { Error: Plugin 1 specified in "base" provided an invalid property of "loose" while parsing file: mypath\react-app.js

javascript

browserify

ecmascript-6

gulp

babelify