如何在单独的browserify供应商包中包含node_modules

Question

我正在尝试将AngularJS应用转换为使用browserify.我使用napa在node_modules中安装了所有的bower包.现在我想将它们浏览到一个单独的供应商包中,并将它们声明为"外部"依赖项.我想给它们别名,这样我就可以"require('angular')"而不是"require('angular/angular')",因为看起来你可以用外部来做.

我见过的例子(例如http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/)都假设我已将供应商文件下载到'lib'目录中.我想从node_modules中捆绑我的供应商文件.看起来应该很容易,但我看不出怎么做.

Answer 1

I was just trying to do the same thing. I think you need to use --require for the vendor bundle and --export for the application's so that the dependencies don't get bundled twice.

This worked for me using browserify's api and gulp (lodash and pixijs being my node_modules):

var gulp = require('gulp');
var browserify = require('browserify');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');


gulp.task('libs', function () {
  return browserify()
    .require('lodash')
    .require('pixi.js')
    .bundle()
    .on('error', handleErrors)
    .pipe(source('libs.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function () {
  return browserify('./src/main.js')
    .external('lodash')
    .external('pixi.js')
    .bundle()
    .on('error', handleErrors)
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('watch', function(){
  gulp.watch('src/**', ['scripts']);
});

gulp.task('default', ['libs', 'scripts', 'watch']);

Of course, this solution is a pain to maintain... So I patched browserify to accept arrays in require and external and then you can do this which I think it's a lot better:

var gulp         = require('gulp');
var browserify   = require('browserify');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');

var packageJson = require('../../package.json');
var dependencies = Object.keys(packageJson && packageJson.dependencies || {});


gulp.task('libs', function () {
  return browserify()
    .require(dependencies)
    .bundle()
    .on('error', handleErrors)
    .pipe(source('libs.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function () {
  return browserify('./src/main.js')
    .external(dependencies)
    .bundle()
    .on('error', handleErrors)
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('watch', function(){
  gulp.watch('package.json', ['libs']);
  gulp.watch('src/**', ['scripts']);
});

gulp.task('default', ['libs', 'scripts', 'watch']);

That's the best I could come up with... Please, let me know if you find a better way.