0
ReactJSをクライアント側のビューライブラリレンダリングとして使用しようとしています。また、Material-UIから多くのコンポーネントをコンポーネントとしてインポートしています。 1つの問題は、browserify（ブラウザーでモジュールを使用するため）とbabelify（JSXからJavascriptへのコンパイル）のセットアップにgulpを使用する必要があることです。 しかしReactが複数回バンドルされていると、UIの動作とスタイリングにエラーが発生することがわかりました。 this articleによると、gulpfile.jsを次のように設定しました。Gulpを使ってReactJを何度も束ねないようにするには？
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');
var dependencies = [
'react',
'react-dom',
'material-ui',
'react-tap-event-plugin'
];
var scriptsCount = 0;
gulp.task('scripts', function() {
bundleApp(false);
});
gulp.task('deploy', function(){
bundleApp(true);
});
gulp.task('watch', function() {
gulp.watch(['./app/*.js'], ['scripts']);
});
gulp.task('default', ['scripts','watch']);
function bundleApp(isProduction) {
scriptsCount++;
var appBundler = browserify({
entries: './app/app.js',
debug: true
})
if (!isProduction && scriptsCount === 1){
browserify({
require: dependencies,
debug: true
})
.bundle()
.on('error', gutil.log)
.pipe(source('vendors.js'))
.pipe(gulp.dest('./web/js/'));
}
if (!isProduction){
dependencies.forEach(function(dep){
appBundler.external(dep);
})
}
appBundler
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.on('error',gutil.log)
.pipe(source('bundle.js'))
.pipe(gulp.dest('./web/js/'));
}
私が実行している場合：回
gulp scripts
より、UIは、コンソール内のいくつかの問題やエラーを持っているでしょう。
私はgulpfileを修正してReactをバンドルする必要はありませんか？助けてください。