JSXはGulpとBabelと一緒にトランスリングしない

Question

私はReactアプリケーションを起動しようとしているGulpスクリプトを持っています。私は同じプリセットオプション と同じディレクトリに.babelrcファイルもありオプション

としてバベルプリセット「ENV」を追加していガルプファイルがgulpfile.babel.js

命名され

• ガルプファイルが含まれています：

  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: '' 
       }, 
      }) 
  }) 
  

  ガルプタスクは、私が見起動しますn予期しないトークンに関するエラー：

  これは、反応設定でJSXの蒸散に何か問題があることを示していますか？問題がここに何かあるのか分かりますか？

Answer 1

babel-preset-env JSXをプレーンJavaScriptに変換するためのプリセットは含まれていません。そして、それを適用

npm i --save-dev babel-preset-react 

：

presets: ['env', 'react'] 

babel-preset-envを使用すると、ES2015、2016年、および2017年それのためのプラグインとして、JavaScriptのために必要がありますどのプラグインを決定するために、あなたはbabel-preset-reactをする必要がありますしかし、JSXなどのことは考慮していません。