小白关于使用gulp-babel插件的问题？望前辈不吝赐教！！！

Question

我按照官方的方法编译后的js代码如图所示：

在浏览器加载的时候弹出错误如下：

问题：

1. 显示require未定义，就想问一下，我需要自己定义一个AMD loader来实现编译后的require功能么?

2. 对于这个不是很懂，一开始想着使用requirejs，但是想着那么多的require还是转向使用ES6的module，于是使用gulp插件gulp-babel对ES6代码编译，但是编译后的ES5代码中的require()我们如何去实现？

Answer 1

1. 这里的 require 应该是 CommonJS 的 require 函数，而不是 AMD 的，因为 babel 默认是转换成 CommonJS 格式的。

2. 将 babel 的 modules option 改成 amd 就可以转换 AMD 标准的 module 了，转换后使用 require.js 来加载。当然，如果想兼容多种标准，可以改成 umd，这样即可以使用 require.js 来加载，也可以直接在 HTML 里引入。

gulp.task("default", function () {
    return gulp.src("src/app.js")
               .pipe(babel({
                   modules: "amd" // 默认是 common，也可以改成 umd
                }))
               .pipe(gullp.dest("dist"));
});

Answer 2

同求该问题，我之前也是不清楚这个require在浏览器如何实现，感觉像是nodeJS环境的require,（上面有人帮我解决了这个答案）所以我转去用
browserify (browserify其实是CommonJS方案) 去实现ES6的module，你可以看看我的项目 https://github.com/hjzheng/es6-practice

var gulp = require('gulp');
var browserSync = require('browser-sync');

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

gulp.task("copyIndex", function(){
  gulp.src("src/index.html")
   .pipe(gulp.dest("./build"))
   .pipe(browserSync.reload({stream: true}));
});

gulp.task('browserSync', function(){
    browserSync({
       server: {
          baseDir: './build'
       } 
    });
});

gulp.task("watchFiles", function(){
   gulp.watch('src/index.html', ['copyIndex']);
   gulp.watch('src/**/*.js', ['babelIt','copyIndex']);
});

gulp.task("babelIt", function(){
    browserify({
      entries: 'src/index.js',
      debug: true
    })
    .transform(babelify)
    .bundle()
    .pipe(source('index.js'))
    .pipe(gulp.dest('./build'));
});

gulp.task("clean", function(){
    gulp.src("./build",{read: false})
     .pipe(clean());
});

gulp.task("default", ["copyIndex", "babelIt" ,"browserSync", "watchFiles"]);

其它相关资料：
http://www.cnblogs.com/zjzhome/p/4848592.html
https://babeljs.io/docs/usage/modules/

Answer 3

今天也遇到了这个问题，在栈爆网上有个同样的问题，分享下

http://stackoverflow.com/questions/31593694/do-i-need-require-js-when-i-use-babel