Javascript 使用 browserify、gulp、react.js 接收“错误：找不到模块”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28788431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Receiving 'Error: Cannot find module' using browserify, gulp, react.js
提问by kevindeleon
So I've been playing around with React.js, gulp and browserify. Everything works great until I try to require a module in my main.jsfile. I am requiring components/modules in other files with no problem (see below), but when I try to require one in my main.jsfile, I receive the following error when running gulp serve:
所以我一直在玩 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)
错误：在 /Users/kevin/Documents/MyWork/web/react/node_modules/browserify 的“/Users/kevin/Documents/MyWork/web/react/app/src/js”中找不到模块“./components/Feed” /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) 在 /Users/kevin/Documents/MyWork/web/react/node_modules/browserify/ node_modules/resolve/lib/async.js:22:47 at Object.oncomplete (fs.js:107:15)
If I remove the require (for Feed.js) statement from main.js, everything compiles and gets put in the appropriate distfolder and runs fine (except for react.js complaining about a missing module, of course).
如果我从 中删除 require（对于 Feed.js）语句main.js，则所有内容都会编译并放入适当的dist文件夹中并运行良好（当然，react.js 抱怨缺少模块除外）。
Firstly, my folder structure looks like this:
首先，我的文件夹结构如下所示：
app
│-- gulpfile.js
│-- package.json
│
└───src
│ │
│ ├───js
│ │-- main.js
│ └───components
│ │-- Feed.js
│ │-- FeedList.js
│ │-- FeedItem.js
│ │-- FeedForm.js
│ │-- ShowAddButton.js
│ └
│
└───dist
My gulpfile looks like this:
我的 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']);
My main.js file looks like this:
我的 main.js 文件如下所示：
var React = require('react'),
Feed = require('./components/Feed');
React.renderComponent(
<Feed />,
document.getElementById('app')
);
The Feed.js file looks like:
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;
I'm sure I'm overlooking something really simple...but I've been at this for hours and can't seem to crack it. Any help would be greatly appreciated. (Obviously I'm not posting the code for the other components for the sake of being as brief as possible...but they aren't the problem).
我敢肯定我忽略了一些非常简单的事情……但我已经在这里呆了几个小时，似乎无法破解它。任何帮助将不胜感激。（显然，为了尽可能简短，我不会发布其他组件的代码......但它们不是问题）。
回答by loganfsmyth
Your filenames are not what you think they are. Note this:
您的文件名不是您认为的那样。请注意：
$ find app -type f | awk '{print "_"var React = require('react');
var FeedForm = require('./FeedForm.jsx');
var ShowAddButton = require('./ShowAddButton.jsx');
var FeedForm = require('./FeedForm.jsx');
var FeedList = require('./FeedList.jsx');
"_"}'
_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_
Your Feed.jsfile is actually Feed.js<SPACE>. Same for FeedForm.js. Renaming them makes your example repo build fine.
您的Feed.js文件实际上是Feed.js<SPACE>. 对于FeedForm.js. 重命名它们可以使您的示例存储库构建良好。
回答by Sulok
Please try with code:
请尝试使用代码：
"start": "watchify ./src/js/* ./src/jsx/*.jsx -v -t babelify -o ./build/app/bundle.js"
My issues resolved just after adding file extention(.jsx)
添加文件扩展名（.jsx）后我的问题就解决了
Thanks Sulok
谢谢苏洛克
回答by Tarandeep Singh
May be the Quick Solution is..
可能是快速解决方案是..
##代码##in your Script add *.jsx
在您的脚本中添加 *.jsx
