我正在尝试在 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} />
最佳答案
您必须使用 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
。这应该可以正确地转译您的代码。
关于javascript - 使用 Gulp 任务时出现意外的 token 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44080120/