Gulp，Uncaught語法錯誤：意外的令牌<

我試圖做一個簡單的聯繫人列表使用反應，當我執行「gulp」命令時一切正常，但是當我去chrome時它不顯示任何內容。鉻控制檯說：Gulp，Uncaught語法錯誤：意外的令牌<

"Uncaught SyntaxError: Unexpected token <" at my main.js:10 file

但我認爲這很好。

這是我main.js文件：

var App = require('./components/App'); 
var React = require('react'); 
var ReactDOM = require('react-dom'); 
var AppAPI = require('./utils/appAPI.js'); 


AppAPI.getContacts(); 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

而這是我gulpfile.js

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var reactify = require('reactify'); // Converts jsx to js 
var source = require('vinyl-source-stream'); // Converts string to a stream 

gulp.task('browserify', function(){ 
    browserify('./src/js/main.js') 
     .transform('reactify') 
     .bundle() 
     .pipe(source('main.js')) 
     .pipe(gulp.dest('dist/js')); 
}); 

gulp.task('copy', function(){ 
    gulp.src('src/index.html') 
     .pipe(gulp.dest('dist')); 
    gulp.src('src/css/*.*') 
     .pipe(gulp.dest('dist/css')); 
    gulp.src('src/js/vendors/*.*') 
     .pipe(gulp.dest('dist/js')); 
}); 

gulp.task('default', ['browserify', 'copy'], function(){ 
    return gulp.watch('src/**/*.*', ['browserify', 'copy']); 
});

這是我的index.html文件

<html> 
<head> 
    <title>ReactApp</title> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="app" class="container"></div> 

    <script src="js/jquery-1.12.0.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/main.js"></script> 
</body> 
</html>

應用。 js是

var React = require('react'); 
var AppActions = require('../actions/AppActions'); 
var AppStore = require('../stores/AppStore'); 
var AddForm = require('./AddForm.js'); 

function getAppState(){ 
    return { 
     contacts: AppStore.getContacts() 
    } 
} 

var App = React.createClass({ 
    getInitialState: function(){ 
     return getAppState(); 
    }, 

    componentDidMount: function(){ 
     AppStore.addChangeListener(this._onChange); 
    }, 

    componentUnmount: function(){ 
     AppStore.removeChangeListener(this._onChange); 
    }, 

    render: function(){ 
     console.log(this.state.contacts); 
     return(
      <div> 
       <AddForm /> 
      </div> 
     ); 
    }, 

    // Update view state when change is received 
    _onChange: function(){ 
     this.setState(getAppState()); 
    } 
}); 

module.exports = App;

來源

2016-03-30 rjay

對不起，我忘了附加app.js，修正了 – rjay

@David React允許內聯標記（JSX）。這裏的問題顯然是Gulp不知道的。 – Pointy

這就是React中的JSX - reactify插件可能試圖刪除的東西。 – Andy

-1

你有同樣的問題，因爲對這個職位的人，Syntax Error when using Gulp to compile React in ES6

您可以修復它改變你的一口任務

來源

2016-03-30 17:15:16 ddiestra

你一飲而盡任務的配置需要一些工作：您需要使用一飲而盡。 src到得到你的main.js文件。那麼，轉換是gulp-browserify的一個選項，而不是你想要管流的東西，對於包也是如此。

gulp.task('scripts', function() { 
    return gulp.src('./assets/js/main.js') 
    .pipe(browserify({ 
     transform: [reactify] 
    })) 
    .pipe(gulp.dest('./static/js')); 
});

來源

2016-03-30 17:16:20 JordanHendrix

Gulp，Uncaught語法錯誤：意外的令牌<

回答

相關問題