Gulp，Reactify和Babelify无法一起转换

小编典典

Gulp，Reactify和Babelify无法一起转换

reactjs

这是我的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/'));
});

仅第一个transform语句运行，因此由于缺少其他转换而引发错误（我正在使用带有React的ES6和JSX编写）。

我完全不知所措，非常感谢您的帮助。

阅读 263

2020-07-22

共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/'));
});

有关更多信息，请参见选项页面。

2020-07-22