gulp打包报错？

Question

gulp版本是4.0.2
babel版本是6.23.0

gulp.task("js", function () {
  gulp
    .src("js/**/*.js")
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"));
});

打完没出现错误，但是到浏览器就出现

main.js:1 Uncaught ReferenceError: require is not defined at main.js:1:43

Answer 1

你可能用了CommonJS模块导入方式（require()），浏览器原生不支持这种模块导入方式。

Answer 2

19年以后就没有用过gulp了，我这里有一段17年的代码片段，你看看，现在还可以正常工作

gulp.task('browserify', () =>{
  var bundler = browserify({
      entries:['src/js/pcshowpage/index.js'],
      standalone:'pcshowpage',
      cache:{},
      packageCache:{},
      plugin:[]
  })
  bundler.transform(babelify,{ presets: ["es2015"]});
    bundler.bundle()
    .pipe(source('pcshowpage.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(gulpif(production, streamify(uglify({ mangle: true }))))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('Public/Home/js'))}
);

Answer 3

我觉得应该是通过 Babel 来配置。

Babel 默认好像是生成 AMD/CommonJS 的包引用方式，就是 require。
通过插件还可以支持 System.js 和 UMD 方式。

或者可以考虑直接用 es module