javascript - 当我尝试运行 grunt-react 任务时，它会挂起

Question

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

我添加了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 grunt React 运行此任务，并且任务挂起......并且没有任何反应。看起来像是某个进程正在运行，但实际上什么也没发生。

Grunt 版本:
grunt-cli v0.1.13
grunt v0.4.5

操作系统Windows 7。

Answer 1

我了解了这个问题并找到了解决方案。 2015 年 6 月 12 日，React 团队弃用了 grunt-react 包使用的 JSTransform 和 react-tools。相反，该模块作者建议使用 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 组件正在编译。