Javascript 使用Gulp任务时出现意外令牌错误

我试图在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']);

当我运行

gulpjs

命令时，我得到以下错误

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} />

events.js:160
投掷者；//未处理的“错误”事件
^
语法错误：/var/www/myproject/frontend/src/js/iframe.js：
9 |
10 |导出常量路径=(
>11 |（儿童）}>
|     ^
12 |         

您必须使用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传输代码并作出反应。然后将它们作为选项应用于

babel

的

gulpfile

：

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

---

另外，请确保使用

gulp.dest

而不是

gulp.dvest

。这应该可以正确地传输代码。

您必须使用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传输代码并作出反应。然后将它们作为选项应用于

babel

的

gulpfile

：

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

---

也要确保使用<代码> GULL.DIST不<代码> GULP.DARBES< /COD>。这应该正确地转换您的代码。

@丹尼斯，如果它工作了，请考虑通过点击左边的复选标记来接受未来读者的答案。我很高兴它是有帮助的：丹尼斯，如果它奏效了，请考虑通过在答案左边点击复选来接受未来读者的答案。我很高兴这很有帮助：）