ReactJS İhracat modülleri Biraz alabilir ana dosya

Question

I dışa aktarmak istediğiniz böyle sınıfları tepki:

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; 

Ama bir dosyadan aramak istiyorum, bu yüzden aynı dizinde bir main.js dosyası oluşturduk :

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

export default { Foo, Foo2 }; 

gulpfile.js yılında:

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

VeBen bir bağımlılık olarak main eklendi package.json yüzden bir test uygulamasında, ben, bu bileşenleri kullanmak istiyorum, sonra

"main": "dist/bundle.js" 

:ana dosyayı belirtir

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

Ve onları aramaya deneyin bir sayfadan:

import { Foo } from 'main'; 

Ama bu hatayı alıyorum:

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

bundle.js'un var emptyFunction = require('./emptyFunction'); ve aslında mevcut olmayan dosyaların daha require olduğunu görebiliyorum. Bununla kafam karıştı. Başka kombinasyonları başarıdan denedim. Muhtemelen main.js'dan ihracat yaparken yanlış bir şey yapıyorum, belki iki kez ihraç ediyorum. Herhangi bir fikir?

Düzenleme:

Bu aynı sonuçlarla browserify('./src/main.js') ait browserify('./src/Foo.js') INSEAD kullanarak çalıştı beri gulpfile.js ile ilişkili olduğu görünmektedir.

Answer 1

Değişim

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

export default { Foo, Foo2 }; 

ortalık karışabilir aynı dosyada require ile export /import sözdizimi birleştiren Güncelleme

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

için. require'u, ancak import'u kullanmayı düşünmeyin.