首页 > 小白关于使用gulp-babel插件的问题?望前辈不吝赐教!!!

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


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

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

问题:

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

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


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

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


  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"));
});

同求该问题,我之前也是不清楚这个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/

【热门文章】
【热门文章】