Question

在我的项目中，我使用Grunt构建javascript文件，我有ReactJS组件，这使得Grunt在我的一个javascript文件中抱怨Error: Parsing file，这是由JSX语法引起的：

"use strict";

var $ = require('jquery');
var React = require('react');
require('app/comments/comment_box_react.js');

$.fn.comment_box = function(options){
    var opts = $.extend({}, $.fn.comment_box.defaults, options);
    var me = this;

    React.render(<CommentBox url="comments.json" />, this);
    return me;
}

$.fn.comment_box.defaults = {}

我在Grunt中的browerify配置如下所示：

browserify: {
    main: {
        files: {
            '<%= paths.js_built %>/bundle.js': ['<%=paths.js %>/project.js'],
        }
    },
    transform: ['reactify'],
},

如何在捆绑之前首先执行转换？

Answer 1

其文档中的转换示例在选项对象中具有transform数组。

browserify: {
  dist: {
    files: {
      'build/module.js': ['client/scripts/**/*.js', 'client/scripts/**/*.coffee'],
    },
    options: {
      transform: ['coffeeify']
    }
  }
}

此外，您的转换定义看起来超出了main定义。不确定这是否是全局的，所以你可能不得不将它移到main中。像这样的东西

browserify: {
    main: {
        files: {
            '<%= paths.js_built %>/bundle.js': ['<%=paths.js %>/project.js'],
        },
        options: {
            transform: ['reactify']
        }
    }
}

Answer 2

我最终使用gulp并在bundle之前全局转换：

https://github.com/andreypopp/reactify/issues/66

gulp.task('activitiesjs', function() {
    browserify({
        entries: [
            paths.js+'/lib/activities/activities.js',
        ]
    }).transform(reactify, {global:true}).bundle().pipe(source('bundle.js')).pipe(gulp.dest(paths.js_built+'/activities'));
});

浏览器将Grunt转换为ReactJS然后捆绑

2 个答案: