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';

但是我收到了这个错误：

错误：无法找到模块＆＃39; ./ emptyFunction＆＃39;来自＆＃39; / testing-react / node_modules / main / dist＆＃39;

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

修改

这似乎与gulpfile.js有关，因为我尝试使用browserify('./src/Foo.js') browserify('./src/main.js') composer update个vendor/，结果相同。

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。

ReactJS - 从主文件

1 个答案: