grunt-react任務只在我嘗試運行時掛起

Question

我試圖自動化.jsx模板編譯。我正在用咕嚕聲來實現這個目標。但目前我的.jsx編譯的咕task任務只是掛起而沒有任何反應......

我添加了NPM包grunt-react。然後我說配置吧：

module.exports = function(grunt){ 
    grunt.loadNpmTasks('grunt-react'); 

    grunt.initConfig({ 
     react: { 
      dynamic_mappings: { 
       files: [ 
        /* ui-components compiling */ 
        { 
         expand: true, 
         cwd: './scripts/components', 
         src: ['**/**.jsx'], 
         dest: './scripts/components/dest', 
         ext: '.js' 
        } 
       ] 
      } 
     } 
    }); 

    grunt.registerTask('react', ['react']); 
}; 

然後我試圖運行使用咕嚕grunt react這個任務，任務掛起...並沒有任何反應。它看起來像一些進程運行，但實際上沒有任何反應。

咕嚕版本：
grunt-cli v0.1.13
grunt v0.4.5

操作系統Windows 7

Answer 1

我學會了這個問題，並得到了解決。 2015年6月12日，React團隊已棄用JSTransform和react-tools，其中grunt-react包使用。相反，這個模塊作者建議使用Babel。

我用命令安裝巴貝爾和相關的軟件包：

npm install --save-dev grunt-babel babel-preset-es2015 babel-plugin-transform-react-jsx babel-preset-react

然後我配置我Gruntfile.js使用巴貝爾的文件編譯.jsx到.js文件：

module.exports = function(grunt){ 
    grunt.loadNpmTasks('grunt-babel'); 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     babel: { 
      options: { 
       plugins: ['transform-react-jsx'], 
       presets: ['es2015', 'react'] 
      }, 
      jsx: { 
       files: [{ 
        expand: true, 
        cwd: './scripts/components', 
        src: ['*.jsx'], 
        dest: './scripts/components', 
        ext: '.js' 
       }] 
      } 
     } 
    }); 

    grunt.registerTask('react', ['babel']); 
}; 

而現在，當我運行命令grunt react我的反應.jsx組件正在編譯。