Gulp、Reactify 和 Babelify 没有一起转换

IT技术 reactjs gulp browserify babeljs reactify
2021-05-02 07:27:25

这是我的 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 编写带有react)。

我完全不知所措,非常感谢帮助。

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

有关更多信息,请参阅选项页面