在 React 组件上运行 grunt-browserify 时解析错误答案

【问题标题】：Parse error when running grunt-browserify on a React component在 React 组件上运行 grunt-browserify 时解析错误
【发布时间】：2015-04-04 15:21:09
【问题描述】：

我只是在玩弄 React，并使用 grunt 和 grunt-browserify 进行了基本设置，但我遇到了解析错误。有谁知道这个的解决方案？旁注 - 当我不使用 react/jsx 时，任务运行良好。

带有一个基本组件：

var HelloWorld = React.createClass({
  render: function(){
    return (
      <div>
        Hello World!
      </div>
    )
  }
});

React.render(<HelloWorld />, document.getElementById('app'));

我收到此错误：

>> File "assets/javascripts/app.js" changed.
Running "browserify:dist" (browserify) task
>> /Users/username/www/reactor/assets/javascripts/app.js:4
>>       <div>
>>       ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.

这是繁重的任务：

  browserify: {
      dist: {
        files: {
          'public/javascripts/app.js' : 
          [
            'assets/javascripts/components/**/*.js',
            'assets/javascripts/app.js'
          ]
        }
      }
    },

【问题讨论】：

能否请您添加grunt browserify任务的代码？
添加到@DhirajBodicherla

标签： gruntjs reactjs browserify grunt-browserify

【解决方案1】：

我没有接受 Dhiraj 的回答，但这导致我使用了 reactify。

browserify: {
  options: {
    transform: ['reactify'],
    extensions: ['.jsx'],
    debug: true
  },
  dist: {
    files: {
      'public/javascripts/app.js' : 
      [
        'assets/javascripts/components/**/*.jsx',
        'assets/javascripts/app.jsx'
      ]
    }
  }
},

【讨论】：

或者如果你想要 es6 转换，也可以使用 'babelify'（它也支持 jsx）。反应更快。

【解决方案2】：

HelloWorld 类是jsx，所以 grunt-browserify 需要使用转换选项将 jsx 转换为 js。

browserify: {
  dist: {
    options: {
      transform: [ require('grunt-react').browserify ] // <-- this one
    },
    client: {
      src: [assets/javascripts/components/**/*.js, assets/javascripts/app.js], // sources files
      dest: 'public/javascripts/app.js' // output file
    }
  }
}

Here is a reference

希望这会有所帮助。

【讨论】：