在React組件上運行grunt-browserify時出現解析錯誤

Question

我只是在用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' 
      ] 
     } 
     } 
    }, 

Answer 1

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

希望這有助於。

Answer 2

我沒有去Dhiraj的答案，但這導致我使用reatify。

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