使用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; 

我敢肯定,我忽视了一些非常简单的事情,但是我已经在这里呆了好几个小时,似乎无法破解它。 任何帮助将不胜感激。 (很明显,我不是为了尽可能简短地发布其他组件的代码…但是它们不是问题)。

       

网上收集的解决方案 "使用browserify,gulp,react.js接收“错误:找不到模块”"

你的文件名不是你的想法。 注意这个:

 $ 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