使用Gulp使browserify模块外部化

Question

我有一个图书馆lib.js,我想从创建lib/a.js和lib/b.js并能够从脚本中使用它client.js用var a = require('lib/a.js');,它的作品时,我只是包括编译lib.js库之前client.js(因此,lib.js必须声明require,它知道函数lib/a.js)

我想我必须使用external,alias但我不确定这是什么方法

此外,是否可以使用Gulp文件自动为我的库中的文件夹创建所有别名？例如.为lib/dir 中的所有文件创建别名？

Answer 1

以下是一些有助于分别构建常见lib.js和client.js包的gulp任务.

请注意,在捆绑lib.js时,你必须告诉bn以下b.require()lib/*.js,你必须告诉它b.external()捆绑client.js时将单独加载的库.

var path = require('path');
var gulp = require('gulp');
var browserify = require('browserify');
var concat = require('gulp-concat');
var transform = require('vinyl-transform');

gulp.task('build-lib', function () {

  // use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle();
  // so that we can use it down a vinyl pipeline as a vinyl file object.
  // `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects.
  var browserified = transform(function(filename) {

    // basename, for eg: 'a.js'
    var basename = path.basename(filename);

    // define the exposed name that your client.js would use to require();
    // for eg: require('lib/a.js'); // -> exposed name should be 'lib/a.js'
    var expose = 'lib/' + basename;

    return browserify(filename)
      .require(filename, { expose: expose})
      .bundle();
  });

  return gulp.src(['./lib/*.js'])
    .pipe(browserified)
    .pipe(concat('lib.js'))
    .pipe(gulp.dest('./dist'));
});

gulp.task('build-client', function () {

  var browserified = transform(function(filename) {
    // filename = './client.js'

    // let browserify know that lib/a.js and and lib/b.js are external files
    // and will be loaded externally (in your case, by loading the bundled lib.js 
    // for eg: <script src='dist/lib.js'>)
    return browserify(filename)
      .external('lib/a.js')
      .external('lib/b.js')
      .bundle();
  });

  return gulp.src(['./client.js'])
    .pipe(browserified)
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['build-lib', 'build-client']);