如何讓React與Grunt和Babel合作？

Question

我試圖利用我們目前擁有的Grunt構建將React集成到當前項目中。

我已經去了grunt-react https://www.npmjs.com/package/grunt-react ，它說它已被棄用，我應該使用grunt-babel 。 https://github.com/babel/grunt-babel

這是否可以在編譯React時立即使用？ 為了使其正常工作，我是否需要安裝其他東西，例如babel-preset-react https://babeljs.io/docs/plugins/preset-react/ ？

另外，我不確定如何設置Gruntfile來處理此問題，目前我有：

    babel: {
        options {
            sourceMap: true,
            presets: ['es2015']
        },
        dist: {
            files: [
                {
                    expand: true,
                    cwd: 'src/',
                    src: ['*.js'],
                    dest: 'dist/'
                }
            ]
        }
    },

謝謝！

Answer 1

希望您的解決方案在這里仍在回答，它將幫助一些需要工作的人以咕unt和通天的方式做出反應

確保首先安裝了以下內容：

npm install --save-dev grunt-babel babel-cli

Babel Grunt - Babel的Grunt插件

npm install --save-dev babel-plugin-transform-es2015-modules-amd 

npm install babel-preset-env --save-dev 

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

然后添加如下的grunt任務/ gruntfile：

module.exports = function (grunt) {
'use strict';
  grunt.initConfig({
    babel: {
        options: {
            sourceMap: false,
            presets: ["env", "react"],
            plugins: ["transform-es2015-modules-amd"]
        },
        dist: {
            files: [{
                expand: true,
                cwd: './src',
                src: ['*.js'],
                dest: './generated',
                ext: '.js'
            }]
        }
    }
  });
  grunt.loadNpmTasks('grunt-babel');
  grunt.registerTask('default', ['babel']);
};

的package.json

   "devDependencies": {
       "babel-cli": "^7.0.0-beta.3",
       "babel-core": "7.0.0-alpha.19",
       "babel-plugin-transform-es2015-modules-amd": "^7.0.0-alpha.19",
       "babel-preset-env": "^2.0.0-beta.2",
       "babel-preset-es2015": "7.0.0-alpha.19",
       "babel-preset-react": "^7.0.0-alpha.19",
       "grunt-babel": "^7.0.0",
 }

希望這可以幫助。

EDITED

通天塔-> @babel

從Babel 7開始，Babel團隊改用了范圍包，因此您現在必須使用@ babel / core而不是babel-core。

您的依賴項將需要像這樣修改：

babel-cli-> @ babel / cli。 例如：babel-與@ babel /。

package.json如下所示：

"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"grunt-babel": "^8.0.0",