JSX 不使用 Gulp 和 Babel 进行编译

Question

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

• Gulp 文件名为gulpfile.babel.js
• 我正在添加 Babel 预设 'env' 作为选项
• 同目录下还有一个.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 之类的东西。