使用 Gulp 使 browserify 模块外部化答案

【问题标题】：Make browserify modules external with Gulp使用 Gulp 使 browserify 模块外部化
【发布时间】：2014-01-31 16:45:41
【问题描述】：

我有一个库lib.js，我想从lib/a.js 和lib/b.js 创建并能够使用var a = require('lib/a.js'); 从脚本client.js 中使用它，并且当我只包含已编译的lib.js 库在 client.js 之前（因此，lib.js 必须声明一个知道 lib/a.js 的 require 函数）

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

另外，是否可以有一个 Gulp 文件为我的库中的文件夹自动创建所有别名？例如。为lib/ 目录中的所有文件创建别名？

【问题讨论】：

标签： javascript browserify gulp

【解决方案1】：

这里有几个 gulp 任务可以帮助您分别构建通用的 lib.js 和 client.js 包。

请注意，捆绑 lib.js 时必须将 browserify 告知 b.require() lib/*.js，并且必须告知 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']);

【讨论】：

感谢您的回答
目前 require 只接受模块而不接受文件名（因此它不应包含扩展名）。如果模块是条目之一，那么它将不起作用。
在当前版本中，vinyl-transform 无法正常工作：改用 source+buffer：github.com/gulpjs/gulp/blob/master/docs/recipes/…
我正在尝试将 jquery 放入供应商，但是当我这样做时，它会在导入 jquery-ui 时引发错误“jQuery 未定义”，但是当它包含在 app.js 中时它可以工作。我还定义了导出 $ 的 browserify-shim

【解决方案2】：

您在寻找external requires 吗？

要与 gulp-browserify 一起使用，请检查 README

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

也应该与 bundle.require 一起使用。

【讨论】：

是的，但我看不出它们如何与 gulp 一起工作（如何创建库并需要外部模块）
不要使用 gulp-browserify。它被认为已弃用
在撰写本文时，gulp-browserify 还没有被弃用。 :)