小白关于使用gulp-babel插件的问题？望前辈不吝赐教！！！
我按照官方的方法编译后的js代码如图所示：
在浏览器加载的时候弹出错误如下：
问题：
-
显示require未定义，就想问一下，我需要自己定义一个AMD loader来实现编译后的require功能么?
-
对于这个不是很懂，一开始想着使用requirejs，但是想着那么多的require还是转向使用ES6的module，于是使用gulp插件gulp-babel对ES6代码编译，但是编译后的ES5代码中的
require()我们如何去实现？
babel 异步模块加载机制-amd es6 gulp-babel gulp
ltmike
9 years, 2 months ago
Answers
同求该问题，我之前也是不清楚这个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/
自慰军军团长
answered 9 years, 2 months ago
-
这里的
require应该是 CommonJS 的require函数，而不是 AMD 的，因为babel默认是转换成 CommonJS 格式的。 -
将 babel 的
modulesoption 改成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"));
});
皇家ミ烈焰
answered 9 years, 2 months ago