Browserify未能編譯反應

Question

這是gulpfile.js：

var gulp = require('gulp'), 
    browserify = require('gulp-browserify'), 
    babel = require('gulp-babel'), 
    babelify = require("babelify"); 

gulp.task('js', function() { 
    gulp.src(config.paths.js.src) 
    .pipe(browserify({ 
     insertGlobals : true, 
     debug : true 
     })) 
    .pipe(gulp.dest(config.paths.js.dest)) 
}); 

在的package.json我已經加入：

"browserify": { 
    "transform": [["babelify", { "presets": ["react"] }]] 
} 

這是與文件反應：

ReactDOM.render(
    <Overlay message="TEST" />, 
    document.getElementById('content') 
); 

最後，錯誤是：

components/main-component.js:15 
      <div class="overlay"> 
      ^
ParseError: Unexpected token 
    at wrapWithPluginError (/home/novak/Documents/myProjects/OpenWorld/node_modules/gulp-browserify/index.js:44:1 

注：我沒有使用ES2015，只是普通的js。

我已經嘗試了很多東西放入吞噬任務，但它總是給我一些錯誤。有人可以告訴我如何做這項工作嗎？

一些更多的來源： 主component.js：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Print = require('./main-template'); 

var Overlay = React.createClass({ 
    getInitialState: function() { 
     return { show: false }; 
    }, 
    render: function() { 
     if (!this.state.show) { 
      return; 
     } 
     return(
      <div class="overlay"> 
       <div class="content"> 
        <Print message="{this.props.message}"/> 
       </div> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Overlay message="TEST" />, 
    document.getElementById('game-content') 
); 

module.exports = Overlay; 

Answer 1

您需要.jsx轉換爲.js，因爲瀏覽器不知道JSX。所以你需要先改變它。

步驟隱蔽jsx到js：

確保已安裝

1. gulp-babel
2. babel-plugin-transform-react-jsx

通過

npm install gulp-babel babel-plugin-transform-react-jsx 

然後在您gulp文件

var gulp = require('gulp'); 
var babel = require('gulp-babel'); 

gulp.task("babel", function(){ 
    return gulp.src("src to jsx/*.jsx"). 
     pipe(babel({ 
      plugins: ['transform-react-jsx'] 
     })). 
     pipe(gulp.dest("src to js/*.js")); 
});