ReactJS - 从主文件导出模块

我有一些像这样的 React 类，我想导出：

import React, { PropTypes } from 'react';
var Foo = React.createClass({
    propTypes: {
        foo1: PropTypes.string,
        foo2: PropTypes.number
    },
    getDefaultProps() {
        return {
            foo1: 'foo1',
            foo2: 2
        };
    },
    render: function() {
        return (
            <div>Foo</div>
        );
    },
});
export default Foo;

但是我想从一个文件调用它们，所以我在同一目录中创建了一个main.js文件：

var Foo = require('./Foo');
var Foo2 = require('./Foo2');
export default { Foo, Foo2 };

在gulpfile.js：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('build-js', function() {
    return browserify('./src/main.js')
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'));
});
gulp.task('build', ['build-js']);

package.json指定主文件：

"main": "dist/bundle.js"

测试应用程序中，我想使用这些组件，因此在package.json中添加了main作为依赖项：

"main": "file:../../main"

我尝试从页面调用它们：

import { Foo } from 'main';

但是我收到此错误：

错误：无法从"/testing-react/node_modules/main/dist"中找到模块"./emptyFunction"

我可以看到bundle.js有var emptyFunction = require('./emptyFunction');和更多实际上不存在的文件require。我对此有点困惑。我尝试了其他组合但没有成功。可能我在从main.js导出时做错了什么，也许是因为我导出了两次。知道吗？

编辑：

这似乎与gulpfile.js有关，因为我尝试使用browserify('./src/Foo.js') browserify('./src/main.js')的 insead 以获得相同的结果。