使用Gulp将jsx转换为js时反应语法错误

Question

我正在尝试使用angular和react的简单演示邮箱应用程序。

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)

根据错误消息，第14行存在语法错误，其中html以return语句开头。 根据我正在研究的教程，我的代码正确，应该可以正常工作。 请在我的代码中找出问题。

Answer 1

我相信您必须告诉babelify使用反应预设，例如

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

我也相信您可能需要安装预设。 通过npm：

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

Answer 2

只需使用gulp-react

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

更新

不赞成Gulp-反应，而推荐使用Gulp-Babel

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

然后

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

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