Quindi ho giocato con React.js, gulp e browserify. Tutto funziona alla grande finché non provo a richiedere un modulo nel mio file main.js
. Sto richiedendo componenti/moduli in altri file senza alcun problema (vedi sotto), ma quando provo a richiedere uno nel mio file main.js
, ricevo il seguente errore durante l'esecuzione gulp serve
:Ricezione 'Errore: impossibile trovare il modulo' utilizzando browserify, gulp, react.js
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)
Se rimuovo la richiedono (per Feed.js) dal main.js
, tutto viene compilato e messo nella giusta cartella dist
e gira bene (eccetto react.js che lamenta un modulo mancante, ovviamente).
In primo luogo, la mia struttura di cartelle simile a questa:
app
│-- gulpfile.js
│-- package.json
│
└───src
│ │
│ ├───js
│ │-- main.js
│ └───components
│ │-- Feed.js
│ │-- FeedList.js
│ │-- FeedItem.js
│ │-- FeedForm.js
│ │-- ShowAddButton.js
│ └
│
└───dist
mio gulpfile si presenta così:
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']);
Il mio file main.js si presenta così:
var React = require('react'),
Feed = require('./components/Feed');
React.renderComponent(
<Feed />,
document.getElementById('app')
);
Il Il file Feed.js ha il seguente aspetto:
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;
Sono sicuro che sto trascurando qualcosa di veramente semplice ... ma sono stato a questo per ore e non riesco a decifrarlo. Qualsiasi aiuto sarebbe molto apprezzato. (Ovviamente non sto postando il codice per gli altri componenti al fine di essere il più breve possibile ... ma non sono il problema).
'var Feed.js'? È un errore di battitura? – elclanrs
Mi spiace ... sì ... corretto. – kevindeleon
Puoi creare un repo github con tutto il codice? Ho creato un progetto con il codice che hai fornito e creato correttamente. – SteveLacy