如何包括一个独立的供应商browserify捆绑node_modules [英] How to include node_modules in a separate browserify vendor bundle

问题描述

我想转换一个AngularJS应用程序使用browserify。我一直在使用纳帕安装在node_modules我所有的亭子包。现在，我想他们browserify到一个单独的供应商包和它们声明为外部的依赖。我想给他们的别名，这样我就可以要求（'角'），而不是要求（角/角'），因为它似乎可以用外部做。

I am trying to convert an AngularJS app to use browserify. I have installed all my bower packages in node_modules using napa. Now I want to browserify them into a separate vendor bundle and declare them as 'external' dependencies. I would like to give them aliases, so that I can "require('angular')" instead of "require('angular/angular')", as it seems you can do with externals.

我所看到的（例如<一个例子href=\"http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/\">http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/)所有假设我已经downloaed供应商的文件转换成一个'库'目录下。我想刚刚从node_modules捆绑我的供应商档案。现在看来似乎应该很容易，但我看不出如何做到这一点。

The examples I have seen (e.g. http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/) all assume that I have downloaed the vendor files into a 'lib' directory. I want to just bundle my vendor files from node_modules. It seems like it should be easy but I can't see how to do it.

推荐答案

我只是试图做同样的事情。我认为你需要使用 - 要求对供应商包和 - 出口应用程序的，这样的依赖关系不要让捆绑的两倍。

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.

本使用browserify的API和一饮而尽（lo​​dash和pixijs是我node_modules）为我工作：

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

当然，这个解决方案是维持一个痛苦......所以，我修补browserify接受要求和外部，然后你可以做到这一点，我认为这是好了很多：

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.

这篇关于如何包括一个独立的供应商browserify捆绑node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！