Grunt browserify 转换 ReactJS 然后捆绑

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.js 中。像这样

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

Answer 2

我最终使用 gulp 并在捆绑之前进行全局转换：

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 browserify 转换 ReactJS 然后捆绑

Grunt browserify transform ReactJS then bundle

gruntjs

reactjs

browserify