JSX沒有與Gulp和Babel一起編譯

我有一個Gulp腳本，我試圖啓動一個React應用程序。JSX沒有與Gulp和Babel一起編譯

的咕嘟咕嘟文件被命名爲gulpfile.babel.js
我加入了通天預設「ENV」作爲一個選項
還有一個.babelrc文件在同一目錄下具有相同的預設選項

的咕嘟咕嘟文件包括：

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/*[email protected](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錯誤：

29 |   return (
> 30 |    <div> 
    |   ^

這告訴我什麼是錯與在反應設置的JSX transpilation？你會碰巧知道問題可能在這裏嗎？

來源

2017-08-08 mm2887

babel-preset-env不包含預設將您的JSX轉換爲普通JavaScript。對於那些你需要babel-preset-react：

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

然後應用它：

presets: ['env', 'react']

babel-preset-env決定你需要哪些插件爲你的JavaScript，如插件ES2015，2016年和2017年這但是，不會考慮諸如JSX之類的東西。

來源

2017-08-08 06:48:08 Li357

似乎Gulp/Babel工作正常，但index.js文件更改爲反應的語法，如「var _react = require（'react'）;」。然後，我看到控制檯中的錯誤，需要未定義。這是否意味着我需要將requireJS添加到我的網站？最簡單的方法是什麼？ – mm2887

@ mm2887您必須使用Webpack將您的項目打包爲網頁。 – Li357

有沒有辦法利用Gulp來做到這一點？我基本上試圖將React添加到基於Bootstrap的網站上，該網站已經有一大堆工作任務的Gulp文件。 – mm2887

JSX沒有與Gulp和Babel一起編譯

回答

相關問題