Question

当我运行gulp时，我似乎遇到了将JSX文件编译为JS的问题。

Gulp Dependencies：

var gulp        = require('gulp');
var browserify  = require('browserify');
var babelify    = require('babelify');
var source      = require('vinyl-source-stream');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var runSequence = require('run-sequence');

我认为babelify会为我编译我的JSX，我不必担心。

然后我得到了我的构建文件：

gulp.task('build', function () {
  return browserify({
    entries: 'app.js',
    extensions: ['.jsx'],
    debug: true
  })
  .transform(babelify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('compress', function() {
  return gulp.src('./dist/bundle.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', function(cb) {
  runSequence('build','compress', cb);
});

我似乎在app.js文件中收到错误，我添加了第一个组件。

感谢高级帮助。

****更新****

这是我在运行gulp后得到的错误：

events.js:85
      throw er; // Unhandled 'error' event
            ^
SyntaxError: /Users/maxlynn/Documents/childcare-army/app.js: Unexpected token (6:4)
  4 | 
  5 | React.render(
> 6 |     <AppRoot />,
    |     ^
  7 |     document.getElementById('app-root')
  8 | );

Answer 1

如果您最近安装了babelify，则需要将一些其他配置传递给转换调用，因为Babel 6.x不再提供默认预设。

为了能够转换JSX，您需要启用react预设。

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

.transform('babelify', { presets: ['es2015', 'react'] })

React - react.render（）

1 个答案: