javascript - ReactJS - 从主文件导出模块

Question

我有一些像这样的 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';

但我收到此错误:

Error: Cannot find module './emptyFunction' from '/testing-react/node_modules/main/dist'

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

编辑:

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

Answer 1

改变

var Foo = require('./Foo');
var Foo2 = require('./Foo2');

export default { Foo, Foo2 };

至

export const Foo = require('./Foo');
export const Foo2 = require('./Foo2');

更新

在同一文件中将 export/import 语法与 require 组合可能会变得困惑。考虑不使用 require 而是使用 import。