'Hata: modül bulunamıyor' browserify, gulp, react.js kullanarak alınamıyor

Question

Bu yüzden React.js, gulp ve browserify ile oynuyorum. Her şey benim main.js dosyamda bir modül gerektirmeye çalışana kadar harika çalışıyor. (Aşağıya bakınız) hiçbir sorunla bileşenleri/diğer dosyalarda modülleri gerektiren ediyorum, ama benim main.js dosyada şifreye gerek çalıştığınızda gulp serve çalıştırırken, aşağıdaki hatayı alırsınız:

Error: Cannot find module './components/Feed' from '/Users/kevin/Documents/MyWork/web/react/app/src/js' at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:55:21 at load (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:69:43) at onex (/Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:92:31) at /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/node_modules/resolve/lib/async.js:22:47 at Object.oncomplete (fs.js:107:15)

Ben istenen koşullara kaldırırsanız (Feed.js için) ifadesi, main.js'dan itibaren, her şey derlenip uygun dist klasörüne yerleştirilir ve düzgün çalışır (elbette, eksik bir modül hakkında şikayette bulunmak için react.js dışında).

Öncelikle, benim klasör yapısı aşağıdaki gibidir:

app 
│-- gulpfile.js 
│-- package.json 
│ 
└───src 
│ │ 
│ ├───js 
│  │-- main.js 
│  └───components 
│   │-- Feed.js 
│   │-- FeedList.js 
│   │-- FeedItem.js 
│   │-- FeedForm.js 
│   │-- ShowAddButton.js 
│   └ 
│ 
└───dist 

Benim gulpfile şöyle görünür:

Benim main.js dosya şuna benzer

var gulp = require('gulp'), 
    connect = require('gulp-connect'), 
    open = require("gulp-open"), 
    browserify = require('browserify'), 
    reactify = require('reactify'), 
    source = require("vinyl-source-stream"), 
    concat = require('gulp-concat'), 
    port = process.env.port || 3031; 

// browserify and transform JSX 
gulp.task('browserify', function() { 
    var b = browserify(); 
    b.transform(reactify); 
    b.add('./app/src/js/main.js'); 
    return b.bundle() 
     .pipe(source('main.js')) 
     .pipe(gulp.dest('./app/dist/js')); 
}); 

// launch browser in a port 
gulp.task('open', function(){ 
    var options = { 
     url: 'http://localhost:' + port, 
    }; 
    gulp.src('./app/index.html') 
    .pipe(open('', options)); 
}); 

// live reload server 
gulp.task('connect', function() { 
    connect.server({ 
     root: 'app', 
     port: port, 
     livereload: true 
    }); 
}); 

// live reload js 
gulp.task('js', function() { 
    gulp.src('./app/dist/**/*.js') 
     .pipe(connect.reload()); 
}); 

// live reload html 
gulp.task('html', function() { 
    gulp.src('./app/*.html') 
    .pipe(connect.reload()); 
}); 

// watch files for live reload 
gulp.task('watch', function() { 
    gulp.watch('app/dist/js/*.js', ['js']); 
    gulp.watch('app/index.html', ['html']); 
    gulp.watch('app/src/js/**/*.js', ['browserify']); 
}); 

gulp.task('default', ['browserify']); 

gulp.task('serve', ['browserify', 'connect', 'open', 'watch']); 

:

var React = require('react'), 
    Feed = require('./components/Feed'); 

React.renderComponent(
    <Feed />, 
    document.getElementById('app') 
); 

The Feed.js dosyası şu şekilde görünüyor:

var React = require('react'); 
var FeedForm = require('./FeedForm'); 
var ShowAddButton = require('./ShowAddButton'); 
var FeedForm = require('./FeedForm'); 
var FeedList = require('./FeedList'); 

var Feed = React.createClass({ 

    getInitialState: function() { 
     var FEED_ITEMS = [ 
      { key: '1', title: 'Just something', description: 'Something else', voteCount: 49 }, 
      { key: '2', title: 'Some more stuff', description: 'Yeah!', voteCount: 34 }, 
      { key: '3', title: 'Tea is good', description: 'yepp again', voteCount: 15 }, 
     ]; 

     return { 
      items: FEED_ITEMS 
     }; 
    }, 

    render: function() { 
     return (
      <div> 
       <div className="container"> 
        <ShowAddButton /> 
       </div> 

       <FeedForm /> 

       <br /> 
       <br /> 

       <FeedList items={this.state.items} /> 
      </div> 
     ); 
    } 

}); 

module.exports = Feed; 

Gerçekten basit bir şeye baktığımdan eminim ... ama bu saatlerce çalışıyorum ve onu çatlatamıyorum. Herhangi bir yardım büyük takdir edilecektir. (Açıkçası, diğer bileşenler için kodun mümkün olduğunca kısa olması için yayınlamıyorum ... ama sorun değiller).

Answer 1

Dosya adınız, sizin düşündüğünüz gibi değil. Bu Not:

$ find app -type f | awk '{print "_"$0"_"}' 
_app/dist/js/main.js_ 
_app/index.html_ 
_app/src/js/components/Feed.js _ 
_app/src/js/components/FeedForm.js _ 
_app/src/js/components/FeedItem.js_ 
_app/src/js/components/FeedList.js_ 
_app/src/js/components/ShowAddButton.js_ 
_app/src/js/main.js_ 

Sizin Feed.js dosya aslında Feed.js<SPACE> olduğunu. FeedForm.js için de geçerlidir. Bunları yeniden adlandırmak, örnek repo'yu iyi oluşturuyor.

Answer 2

kodu ile deneyin: çözüldü

var React = require('react'); 
var FeedForm = require('./FeedForm.jsx'); 
var ShowAddButton = require('./ShowAddButton.jsx'); 
var FeedForm = require('./FeedForm.jsx'); 
var FeedList = require('./FeedList.jsx'); 

Benim sorunlarını sadece dosya uzantısı (.jsx)

Teşekkür Sulok ekledikten sonra

Answer 3

.. Hızlı Çözüm olabilir

Komut dosyanızda

"start": "watchify ./src/js/* ./src/jsx/*.jsx -v -t babelify -o ./build/app/bundle.js" 

ekleyin * .jsx