Grunt browserify 转换 ReactJS 然后捆绑答案

【问题标题】：Grunt browserify transform ReactJS then bundleGrunt browserify 转换 ReactJS 然后捆绑
【发布时间】：2015-05-07 21:00:01
【问题描述】：

在我的项目中，我使用 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'],
},

如何在打包之前先进行转换？

【问题讨论】：

标签： gruntjs reactjs browserify

【解决方案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']
        }
    }
}

【讨论】：

1) 转换确实在全局范围内发生，但仅在捆绑后发生。 2）我尝试在捆绑后移动变换内部仍然变换。

【解决方案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'));
});

【讨论】：