Question

这是我的gulpfile代码：

gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(reactify)
    .transform(babelify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

只运行第一个转换语句，因此缺少额外的转换会导致错误（我在ES6和JSX中写作反应）。

我完全失去了，真的很感激帮助。

Answer 1

不应再使用Reactify。您没有说明您的版本，但从Babel 6开始，“预设”是实现编译的标准方式。

运行以下

npm install save-dev babel-preset-react babel-preset-es2015

您还应该确保Babelify是最新的。然后你的Gulp配置变为

var babelify = require("babelify");
gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

有关详细信息，请参阅options page。

Gulp，Reactify和Babelify没有一起变换

1 个答案: