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"]
}

所以感觉变换装饰器遗产不起作用。

我正在使用＆＃34; babel-core＆＃34;：＆＃34; ^ 6.7.2＆＃34;。

我已经安装了＆＃34; babel-plugin-transform-decorators-legacy＆＃34;：＆＃34; ^ 1.3.4＆＃34;，

我尝试仅使用stage-x预设来获取Decorators are not supported yet in 6.x pending proposal update. 有没有人仍然遇到变换 - 去除器 - 传统更新后的问题？

Answer 1

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

一点回信息：我正在将这个项目从webpack移回到gulp。我不是webpack的忠实粉丝，而且我更直观地对我说话，所以我想我已经有足够的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错误。

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

1 个答案: