node.js - 如何在单独的 browserify 供应商 bundle 中包含 node_modules

Question

我正在尝试将 AngularJS 应用程序转换为使用 browserify。我已经使用 napa 在 node_modules 中安装了我所有的凉亭包。现在我想将它们浏览到一个单独的供应商包中，并将它们声明为“外部”依赖项。我想给它们起别名，这样我就可以“require('angular')”而不是“require('angular/angular')”，就像你可以用外部一样。

我看到的示例(例如 http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/ )都假设我已将供应商文件下载到“lib”目录中。我只想从 node_modules 捆绑我的供应商文件。看起来应该很容易，但我不知道该怎么做。

Answer 1

我只是想做同样的事情。我认为您需要将 --require 用于供应商 bundle ，将 --export 用于应用程序，这样依赖项就不会被捆绑两次。

这对我使用 browserify 的 api 和 gulp 有用(lodash 和 pixjs 是我的 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']);

当然，这个解决方案维护起来很痛苦......所以我修补了 browserify 以接受 require 和 external 中的数组，然后你可以这样做，我认为好多了:

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']);

这是我能想到的最好的方法......如果你找到更好的方法，请告诉我。