g运行t-react 任务在我尝试 运行 时挂起

Question

我正在尝试自动编译 .jsx 模板。我正在使用 g运行t 来实现这个目标。但是目前我的 .jsx 编译 g运行t 任务只是挂起，没有任何反应...

我添加了 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']);
};

然后我尝试使用 g运行t grunt react 运行 此任务，但任务挂起...但没有任何反应。看起来像是某个过程 运行ning，但实际上什么也没有发生。

G运行t 版本：
grunt-cli v0.1.13
grunt v0.4.5

操作系统Windows7.

Answer 1

我了解了问题并找到了解决方案。 2015 年 6 月 12 日，React 团队弃用了 JSTransform 和 react-tools，其中 grunt-react 包使用。相反，此模块作者建议使用 Babel。

我使用命令安装了 Babel 和相关包：

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

然后我配置 Gruntfile.js 使用 Babel 将 .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 时，我的 react .jsx 组件正在编译。