ब्राउजरिफ़ाई, gulp, react.js

Question

का उपयोग करके 'त्रुटि: मॉड्यूल नहीं मिल रहा है' प्राप्त करना तो मैं React.js, gulp और browserify के साथ खेल रहा हूं। जब तक मैं अपने main.js फ़ाइल में मॉड्यूल की आवश्यकता नहीं करता तब तक सबकुछ बढ़िया काम करता है। मैं (नीचे देखें) कोई समस्या नहीं के साथ घटकों/अन्य फाइलों में मॉड्यूल की आवश्यकता होती है, लेकिन जब मैं अपने main.js फ़ाइल में एक की आवश्यकता के लिए प्रयास करते हैं, मैं निम्नलिखित त्रुटि जब gulp serve चल प्राप्त करते हैं:

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)

अगर मैं की आवश्यकता को दूर (Feed.js के लिए) main.js से कथन, सबकुछ संकलित करता है और उपयुक्त dist फ़ोल्डर में डालता है और ठीक चलाता है (निश्चित रूप से गायब मॉड्यूल के बारे में शिकायत करने के लिए react.js को छोड़कर)।

सबसे पहले, मेरी फ़ोल्डर संरचना इस तरह दिखता है:

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

मेरे gulpfile इस तरह दिखता है:

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

मेरे main.js फ़ाइल इस तरह दिखता है:

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

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

Feed.js फ़ाइल इस तरह दिखती है:

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; 

मुझे यकीन है कि मैं कुछ सचमुच सरल दिख रहा हूं ... लेकिन मैं इस पर घंटों तक रहा हूं और इसे क्रैक नहीं कर सकता। किसी भी तरह की सहायता का स्वागत किया जाएगा। (जाहिर है, मैं जितना संभव हो सके संक्षिप्त होने के लिए अन्य घटकों के लिए कोड पोस्ट नहीं कर रहा हूं ... लेकिन वे समस्या नहीं हैं)।

Answer 1

आपके फ़ाइल नाम वे नहीं हैं जो आपको लगता है कि वे हैं। इस नोट:

$ 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_ 

आपका Feed.js फ़ाइल वास्तव में Feed.js<SPACE> है। FeedForm.js के लिए वही। उनका नाम बदलने से आपका उदाहरण रेपो ठीक हो जाता है।

Answer 2

कोड के साथ प्रयास करें: सिर्फ फ़ाइल extention (.jsx)

धन्यवाद Sulok जोड़ने के बाद

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

मेरे मुद्दों का समाधान

Answer 3

हो सकता है त्वरित समाधान है ..

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

आपकी स्क्रिप्ट में जोड़ें * .jsx