ReactJS Browserify 和 Babel

Question

对不起，如果这听起来是一个非常基本的问题，但我是 gulp 和 browserify 的新手。我有一个 gulp 任务文件

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']);
}); 

在这里，我想将我的代码转换为 ES2015，但我不确定 browserify 任务中的 assets/src/main.js 文件应该有什么。我的问题是，main.js 只是 browserify 的入口点吗？如果是，那么它应该有什么？

Answer 1

entries 将是您的 react 应用程序的入口点，因此 reactDOM 渲染在哪里完成以及您的应用程序在哪里声明，例如它可以包含：

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