用Gulp使外部浏览模块

Question

我有一个我想从lib/a.js和lib/b.js创建的库lib.js，并能够使用var a = require('lib/a.js');从脚本client.js使用它，并且当我只包括编译的lib.js库时，它起作用了在client.js之前（因此，lib.js必须声明一个了解lib/a.js的require功能）

我想我必须使用external和alias，但我不确定正确的方法是什么

另外，是否有可能拥有一个湾文件，该文件会自动为我的库中的文件夹创建所有别名吗？例如。为lib/ DIR？

Answer 1

以下是几个Gulp任务，可以帮助您构建您的常见lib.js和client.js捆绑。

请注意，您必须告诉b.require（）lib/*。js时，将b.rebquire（）捆绑lib.js时，并且必须告诉b.external（）b.external（）库时将分别加载的库。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']);

Answer 2

您是否正在寻找外部需求？

与Gulp-browserify一起使用，检查readme

.on('prebundle', function(bundle) {
  bundle.external('domready');
  bundle.external('react');
})

也应该与bundle.require一起工作。