如何使用 gulp 捆绑外部依赖项答案

【问题标题】：How to bundle external dependencies using gulp如何使用 gulp 捆绑外部依赖项
【发布时间】：2016-06-28 16:48:43
【问题描述】：

我正在尝试将外部 commonjs 模块（react、react-dom）与一些普通的 ES5 文件捆绑在一起，例如 pollyfills.js。

我可以使用 browserify.require 捆绑外部模块

var externalBundler = browserify();
config.externalModules.forEach(externalBundler.bundle);
return externalBundler.bundle()
  .pipe(source("external.js"))
  .pipe(buffer())
  .pipe(sourcemaps.init({ debug: true, loadMaps: true }))
  .pipe(uglify())
  .on('error', gutil.log)
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/'));

和其他使用 gulp.concat 的脚本，但是我很难将它们放在一起。

【问题讨论】：

标签： gulp browserify

【解决方案1】：

我能够像这样组合管道：

gulp.task('bundle-externalscripts', function () {
  var externalBundler = browserify({ debug: true });
  for (var module of config.externalModules) externalBundler.require(module);

  var globalScripts = gulp.src(paths.scripts);

  var externalModules = externalBundler.bundle()
    .pipe(source("externalmodules.js")) //always convert to vinyl source stream
    .pipe(buffer());                //in buffered mode

  return merge(globalScripts, externalModules)
    .pipe(sourcemaps.init({ debug: true, loadMaps: true }))
    .pipe(concat("external.js"))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/'));
});

【讨论】：