Gulpタスクを使用しているときに予期しないトークンエラーが発生しました

Question

Gulpでタスクを実行しようとしていて、Linuxで動作しています。私はgulp jsコマンドを実行すると、タスクが正しく

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']); 

を動作していないようです、私はあなたがあなたのJSXとES2015コードをtranspileするバベルを使用する必要が

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はコードを純粋なJavaScriptに変換するためにいくつかのプリセットを使用していますが、コードは純粋なJavaScriptに変換されていないので、あなたは渡していません。したがって、JSXは有効なJavaScriptではないため、構文エラーが発生します。

gulp-babelをbabel()として使用しているだけで、プリセットがなくてもコードがトランジションされません。

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

これらのコマンドは、ES2015のために、あなたのコードをtranspileと反応させるために、適切なプリセットをインストールします：あなたは、まず、特定のプリセットを使用するバベルを伝えるあなたに該当するプリセットをインストールする必要があります。次に、あなたのbabelのオプションとしてごgulpfileにそれらを適用します。

また

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

、gulp.destないgulp.dvestを使用してください。これにより、コードが正しく翻訳されるはずです。