Gulp / ES2015 / React Unexpected @ 和 transform-decorators/-legacy

Question

我已经使用 Stack 几个小时了。我正在使用 gulp，我正在尝试设置我的构建过程。

构建js看起来是这样的。

gulp.task('buildJS', function () {
    browserify('./browser/js/main.js')
        .transform('babelify',
        {
            presets: ["es2015", "react"],
            plugins: ['transform-class-properties', "transform-object-rest-spread", "transform-decorators-legacy"]
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'));
});

这最终给了我这个错误：

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: Unexpected character '@'

我的 babelrc 是这样的：

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-object-rest-spread","transform-class-properties", "transform-decorators-legacy"]
}

所以感觉像 transform-decorators-legacy 不起作用。

我正在使用“babel-core”：“^6.7.2”。

我已经安装了 "babel-plugin-transform-decorators-legacy": "^1.3.4",

我尝试使用 stage-x 预设只是为了获得Decorators are not supported yet in 6.x pending proposal update. 是否还有人在使用 transform-decarators-legacy 帖子更新时遇到问题？

Answer 1

这里有两个严重错误，都涉及构建过程的疏忽。

回一点信息：我正在将这个项目从 webpack 移回 gulp。我不是 webpack 的超级粉丝，而且 gulp 对我来说更直观，所以我认为我已经受够了我的 webpack 实验，我会转回 gulp。

问题：#1 错误并未真正得到处理，因此很难追踪。我说 gulp 对我来说更直观，但我没有处理需要这样的错误：

//Some gulp task
    .bundle()
     //this is what really helped.
    .on('error', function(err) { console.error(err); this.emit('end'); })
    .pipe(source('bundle.js')) 

这很快让我找到了答案。在 webpack 中，你可以将样式文件导入到你的 js 文件中，它们会内联加载。基本上，我的 js 试图解析一个以@import 开头的 scss 文件。

很容易混淆 es7 装饰器会导致问题，因为它是同一个字符，但事实上，一切正常，我只是没有完成从 webpack 转换回 gulp 的工作。

希望这对将来的某人有所帮助，我浪费了几个小时。最大的问题是没有处理 gulp 错误。