如何让 React 与 Grunt 和 Babel 一起工作？

Question

我正在尝试将 React 集成到一个使用我们当前拥有的 Grunt 构建的当前项目中。

我去了grunt-reacthttps://www.npmjs.com/package/grunt-react, which says it has been deprecated and that I should use 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

希望你的解决方案仍然在这里回答，它将帮助一些需要使用 grunt 和 babel 进行工作的人

确保首先安装了以下软件：

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

Babel 的 Grunt 插件 grunt-babel

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 -> @babel

Since Babel 7 the Babel team switched to scoped packages, so you now have to use @babel/core instead of babel-core.

Your dependencies will need to be modified like so:

babel-cli -> @babel/cli. Ex: babel- with @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 一起工作？

How to get React to work with Grunt and Babel?

javascript

node.js

gruntjs

reactjs

babeljs