2016-10-11 136 views
0

对不起,如果这听起来是一个非常基本的问题,但我是新的吞咽和browserify。我有一个大口任务文件ReactJS Browserify和Babel

var gulp = require('gulp'); 
var babel = require('gulp-babel'); 
var concat = require('gulp-concat'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

gulp.task('bundle', function(){ 
    return browserify({ 
     extensions: ['js', 'jsx'], 
     entries: 'assets/js/src/main.js' 
    }) 
     .transform(babelify.configure({ 
      ignore: /(bower_components)|(node_modules)/ 
     })) 
     .bundle() 
     .on('error', function(err){ 
      console.log('Error : ' + err.message); 
     }) 
     .pipe(source('app.js')) 
     .pipe(gulp.dest('assets/js/')); 
}); 

// Watch JS/JSX and Sass files 
gulp.task('watch', function() { 
    gulp.watch('assets/js/src/**/*.{js,jsx}', ['bundle']); 
}); 

在这里,我想transpile我的代码ES2015,但我不知道资产/ src目录/ main.js文件中browserify任务应该拥有什么。我的问题是,main.js只是browserify的入口点?如果是,那么它应该有什么?

回答

0

entries将是你的反应程序的入口点,以便在那里reactDOM渲染完成并在你的应用程序中声明,例如,它可以包含:

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
); 
+0

我做routers.jsx由入口点,但它能够解析反应组件,如

等。 –