使用browserify，gulp，react.js接收“错误：找不到模块”
所以我一直在玩React.js，gulp和browserify。 一切工作，直到我试图要求我的main.js文件中的模块。 我需要其他文件中的组件/模块没有问题（见下文），但是当我尝试在我的main.js文件中需要一个时，运行gulp serve时收到以下错误：
错误：无法在/ Users / kevin / Documents / MyWork / web / react / node_modules / browserify上从'/ Users / kevin / Documents / MyWork / web / react / app / src / js'find模块“./components/Feed” /node_modules/resolve/lib/async.js:55:21在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 / Object.oncomplete（fs.js：107：15）处的node_modules / resolve / lib / async.js：22：47
如果我从main.js删除了require（对于Feed.js）语句， main.js所有的东西都会编译并放入适当的dist文件夹中，并且运行良好（当然，react.js抱怨缺less的模块）。
首先，我的文件夹结构如下所示：
app │-- gulpfile.js │-- package.json │ └───src │ │ │ ├───js │ │-- main.js │ └───components │ │-- Feed.js │ │-- FeedList.js │ │-- FeedItem.js │ │-- FeedForm.js │ │-- ShowAddButton.js │ └ │ └───dist
我的大文件看起来像这样：
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;
我敢肯定，我忽视了一些非常简单的事情，但是我已经在这里呆了好几个小时，似乎无法破解它。 任何帮助将不胜感激。 （很明显，我不是为了尽可能简短地发布其他组件的代码…但是它们不是问题）。
你的文件名不是你的想法。 注意这个：
$ 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 。 重命名他们使你的例子回购生成罚款。
请尝试使用代码：
var React = require('react'); var FeedForm = require('./FeedForm.jsx'); var ShowAddButton = require('./ShowAddButton.jsx'); var FeedForm = require('./FeedForm.jsx'); var FeedList = require('./FeedList.jsx');
添加文件扩展名（.jsx）后，我的问题得到解决
谢谢Sulok
可能是快速解决scheme是..
"start": "watchify ./src/js/* ./src/jsx/*.jsx -v -t babelify -o ./build/app/bundle.js"
在你的脚本中添加* .jsx