所以我一直在尝试着使用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)
如果我从main.js中删除对于Feed.js的require语句，一切都能正常编译并被放置在适当的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;
我肯定是忽略了某些非常简单的东西...但是我已经做了好几个小时，似乎无法解决它。非常感谢您的任何帮助。（显然，为了尽可能简洁，我没有发布其他组件的代码...但它们不是问题所在。）
var Feed.js？那是打错了吗？ - elclanrsnpm i来安装所有必需的 node_modules...但我假设任何阅读此文的人都已经知道了。 - kevindeleon