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团队已弃用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时，我的反应.jsx组件正在编译。

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

1 个答案: