だから私は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」からモジュール「./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)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)
Require(Feed.js)ステートメントをmain.js
から削除すると、すべてがコンパイルされ、適切な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;
私は本当に簡単なものを見落としていると確信しています...しかし、私はこれに何時間もいたので、それをクラックすることはできないようです。どんな助けも大歓迎です。 (明らかに、できるだけ簡潔にするために他のコンポーネントのコードを投稿していません...しかし、それらは問題ではありません)。
あなたのファイル名はあなたが思っているものではありません。これに注意してください:
$ 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
クイックソリューションかもしれません。
"start": "watchify ./src/js/* ./src/jsx/*.jsx -v -t babelify -o ./build/app/bundle.js"
スクリプトに* .jsxを追加します