javascript - 使用 Gulp 任务时出现意外的 token 错误

Question

我正在尝试在 Gulp 中运行任务，但在 Linux 上运行时遇到问题。该任务似乎无法正常工作

function jsTask() {
    return gulp.src('./frontend/src/js/**/*.js')
        .pipe(babel())
        .pipe(gulp.dvest('frontend/js'));
}

gulp.task('js', jsTask);
gulp.task('js-watch', () => {
    return watch('./frontend/src/js/**/*.js', { ignoreInitial: false }, jsTask);
});

function lessTask() {
    return gulp.src(['./frontend/src/less/*-main.less'])
        .pipe(less())
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest('./public/css'));
}

gulp.task('less', lessTask);
gulp.task('less-watch', () => {
    return watch('./frontend/src/less/**/*.less', { ignoreInitial: false }, lessTask);
});

gulp.task('default', ['js', 'less']);
gulp.task('watch', ['js-watch', 'less-watch']);

当我运行 gulp js 命令时，出现以下错误

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /var/www/myproject/frontend/src/js/iframe.js: 
   9 |
  10 | export const routes = (
> 11 |     <Route path="" component={({children}) => (children) }>
     |     ^
  12 |         <Route path="/not-found" component={NotFoundPage} />

Answer 1

您必须使用 Babel 来转译您的 JSX 和 ES2015 代码。 Babel 使用某些预设将您的代码转换为纯 JavaScript，但您没有传递任何预设，因此代码不会被转换为纯 JavaScript。因此，它会引发语法错误，因为 JSX 不是有效的 JavaScript。

您只是将 gulp-babel 用作 babel() ，没有任何预设，因此它不会转译您的代码。您需要告诉 Babel 使用某些预设首先，安装适用于您的预设:

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

这些命令将为 ES2015 和 React 安装适当的预设来转译代码。然后将它们作为 babel 的选项应用到您的 gulpfile 中:

return gulp.src('./frontend/src/js/**/*.js')
    .pipe(babel({
        presets: ['es2015', 'react']
    }))
    .pipe(gulp.dest('frontend/js'));

此外，请确保使用 gulp.dest 而不是 gulp.dvest。这应该可以正确地转译您的代码。