Question

我有一个Gulp脚本，我试图启动一个React应用程序。

Gulp文件名为gulpfile.babel.js
我正在添加Babel预设＆＃39; env＆＃39;作为一种选择
同一目录中还有一个.babelrc文件，其中包含相同的预设选项

Gulp文件包括：

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const babel = require('gulp-babel');

// convert jsx to JS
gulp.task('babelFiles', function() {
    return gulp.src('js/*.@(js|jsx)')
        .pipe(babel({
            compact: false,
            presets: ['env'],
            }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


// Default task
gulp.task('default', ['babelFiles', 'browserSync']);

// Configure the browserSync task
gulp.task('browserSync', ['babelFiles'], function() {
    browserSync.init({
        server: {
            baseDir: ''
        },
    })
})

当Gulp任务启动时，我看到有关意外令牌的错误：

  29 |         return (
> 30 |             <div>
     |             ^

这告诉我反应设置中的JSX转换有问题吗？你会碰巧知道这里的问题是什么吗？

Answer 1

babel-preset-env不包含将JSX转换为纯JavaScript的预设。为此，您需要babel-preset-react：

npm i --save-dev babel-preset-react

然后应用它：

presets: ['env', 'react']

babel-preset-env确定您需要哪些JavaScript插件，例如ES2015,2016和2017的插件。但是，它不会解决JSX等问题。

JSX没有与Gulp和Babel进行交流

1 个答案: