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

希望你的解决方案仍然在这里回答，这将有助于一些需要工作的人与咕噜咕噜和巴贝尔作出反应

首先确保您已安装以下内容：

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 task / 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",
 }

希望这有帮助。

已编辑

babel - ＆gt; @babel

自Babel 7开始，Babel团队改用了范围包，所以你现在必须使用@ babel / core而不是babel-core。

您的依赖项需要像这样进行修改：

babel-cli - ＆gt; @巴贝尔/ 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",

如何让React与Grunt和Babel合作？

1 个答案: