在使用Gulp將jsx轉換爲js時發生語法錯誤

我正在嘗試使用角度和反應的簡單演示郵箱應用程序。在使用Gulp將jsx轉換爲js時發生語法錯誤

main.jsx

angular.module('MailboxApp',['ui.router']) 
.config(function ($stateProvider,$urlRouterProvider) { 
     $urlRouterProvider.otherwise('/inbox'); 
     $stateProvider.state("inbox",{ 
      url:'/inbox', 
      controller: function ($scope, messageStore, $element) { 

       var MessageList = React.createClass({ 
        render: function() { 
         return (
          <div> 
           <h2>{this.props.messages.length} Unread Messages</h2> 
           <table> 
            <thead> 
             <th>Sender</th> 
             <th>Subject</th> 
             <th>Date</th> 
            </thead> 
            {this.props.messages.map(function(m,i){ 
             return (
              <tr key={i}> 
               <td>{m.sender}</td> 
               <td>{m.subject}</td> 
               <td>{m.date}</td> 
              </tr> 
             ) 
            })} 
           </table> 
          </div> 
         ) 
        } 
       }); 

       var messages = messageStore.getMessages(); 

       React.render(<MessageList messages={messages} />,$element[0]) 
      } 
     }) 
      .state('message',{ 
       url:'/message/:id', 
       templateUrl:'partials/message.html', 
       controller:function($scope,messageStore,$stateParams){ 
        $scope.message = messageStore.getMessages() 
         .filter(function (message) { 
          return message.id == $stateParams.id; 
         })[0]; 
       } 
      }) 
    }) 
.service("messageStore", function() { 
     var messages = []; 
     var sampleSize = 100; 
     for (var i=0; i< sampleSize; i++){ 
      messages.push({ 
       sender: "john.smith"+i+"@gmail.com", 
       date: Date.now()- i*2400000000, 
       id: i, 
       subject: "Regarding report #"+i, 
       body: "Hey Dan. Where's report #"+i+"?" 
      }) 
     } 
     return { 
      getMessages: function(){ 
       return messages; 
      } 
     } 
    })

gulpfile.js

var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var babelify = require('babelify'); 
var browserify = require('browserify'); 
gulp.task('jsx', function() { 
    return browserify({ 
     entries: "./main.jsx" 
    }) 
     .transform(babelify) 
     .bundle() 
     .pipe(source('main.js')) 
     .pipe(gulp.dest("./")); 
});

錯誤：

D:\xampp\htdocs\angular-react-demo>gulp jsx 
[01:04:42] Using gulpfile D:\xampp\htdocs\angular-react-demo\gulpfile.js 
[01:04:42] Starting 'jsx'... 
events.js:85 
     throw er; // Unhandled 'error' event 
      ^
SyntaxError: D:/xampp/htdocs/angular-react-demo/main.jsx: Unexpected token (14:28) 
←[0m 12 |      render←[1m:←[22m ←[36mfunction←[39m ←[34m←[1m(←[22m←[39m←[34m←[1m)←[22m←[39m ←[32m{←[39m 
    13 |       ←[36mreturn←[39m ←[34m←[1m(←[22m←[39m 
> 14 |        ←[1m<←[22mdiv←[1m>←[22m 
    |       ^
    15 |        ←[1m<←[22mdiv←[1m>←[22m 
    16 |         ←[1m<←[22mh2←[1m>←[22m←[32m{←[39m←[36mthis←[39m←[1m.←[22mprops←[1m.←[22mmessages←[1m.←[22mlength←[32m}←[39m Unread Messages←[1m<←[22m←[1m/←[22mh2←[1m>←[22m 
    17 |         ←[1m<←[22mtable←[1m>←[22m←[0m 
    at Parser.pp.raise (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13) 
    at Parser.pp.unexpected (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:91:8) 
    at Parser.pp.parseExprAtom (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:510:12) 
    at Parser.pp.parseExprSubscripts (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:265:19) 
    at Parser.pp.parseMaybeUnary (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:245:19) 
    at Parser.pp.parseExprOps (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:176:19) 
    at Parser.pp.parseMaybeConditional (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:158:19) 
    at Parser.pp.parseMaybeAssign (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:121:19) 
    at Parser.pp.parseParenAndDistinguishExpression (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:583:26) 
    at Parser.pp.parseExprAtom (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:469:19)

根據錯誤MES sage，第14行有一個語法錯誤，其中html在return語句中開始。根據我正在學習的教程，我的代碼是正確的，它應該完美地工作。請在我的代碼中找出問題。

來源

2015-12-01 Nutty Programmer

我相信，你一定要告訴babelify使用的反應預設如

browserify().transform(babelify.configure({ 
    presets: ["react"] 
}));

我也相信你可能需要安裝的預設。通過NPM：

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

來源

2015-12-01 20:33:06

我已經安裝了它，但它仍然拋出的錯誤。我是否需要添加對babel-preset-react的要求？ –

它現在工作。我需要從頂部刪除/ ** @jsx React.DOM * /。 –

只需使用一飲而盡反應的

npm install --save-dev gulp-react

而且

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

gulp.task('default', function() { 
    return gulp.src('template.jsx') 
     .pipe(react()) 
     .pipe(gulp.dest('dist')); 
});

來源：https://www.npmjs.com/package/gulp-react

更新

咕嘟咕嘟反應的贊成一飲而盡，通天

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

已被棄用然後

.pipe(babel({ 
    presets: ['react'] 
}))

來源：https://babeljs.io/docs/plugins/#presets

來源

2016-03-01 12:37:03

在使用Gulp將jsx轉換爲js時發生語法錯誤

回答

相關問題