如何将node_modules包含在单独的browserify供应商包中
我正试图转换AngularJS应用程序来使用browserify。 我已经使用napa在node_modules中安装了所有的bower软件包。 现在我想将它们浏览到一个单独的供应商捆绑包中，并将它们声明为“外部”依赖项。 我想给他们别名，这样我就可以“需要（'angular'）”而不是“require（'angular / angular'）”，就好像你可以用外部的东西做的那样。
我见过的例子（例如http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/ ）都假设我已经将供应商文件下载到“lib”目录中。 我只想捆绑来自node_modules的供应商文件。 这似乎应该是容易的，但我不知道该怎么做。
我只是想做同样的事情。 我认为你需要使用 – 需要供应商捆绑和 – --require的应用程序，以便依赖不捆绑两次。
这对我来说使用browserify的api和gulp（lodash和pixijs是我的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']);
当然，这个解决scheme是一个痛苦的维护…所以我修改了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']);
这是最好的，我可以拿出来…请让我知道，如果你find一个更好的办法。
我也面临这个问题。 因为当所有供应商库在同一个文件中时它是巨大的文件。 所以浏览器总是坚持下载超过10MB的文件。 文件缩小也不是解决scheme，因为编译需要更多时间，对开发没有帮助。
我已经为独立的节点模块和应用程序脚本保存了vendor.js和vendor.js 就像这样。
示例vendor.js（src / app / vendor.js）
/** * Node modules */ require('angular'); require('angular-cookies'); require('angular-ui-router'); require('angular-aria'); require('angular-animate'); ....
示例app.js（src / app / app.js）
/** * App Common Modules */ require('./modules/about/about.routing.js'); require('./modules/home/home.routing.js'); /** * Services */ require('./shared/services/order.js'); require('./shared/services/product.js'); /** * Directives */ require('./shared/directives/dropzone.js'); require('./shared/directives/tab-change.js'); angular .module('myApp', [ //------------- Node modules ------------// 'ui.router', 'ngMaterial', //------------- App Common modules ------------// //About 'cloudDecor.routing.about', 'cloudDecor.controller.about', //Home 'cloudDecor.routing.home', 'cloudDecor.controller.home', //------------- Services --------------// 'cloudDecor.service.order', //------------- Directives ------------// 'cloudDecor.directive.dropzone', 'cloudDecor.directive.tab-change' ]);
gulpfile.js
var gulp = require('gulp'), browserify = require('browserify'), uglify = require('gulp-uglify'), buffer = require('vinyl-buffer'); //App js gulp.task('app_js', function() { // Grabs the app.js file browserify({ entries: ['./src/app/app.js'], debug: true }) .bundle() .pipe(source('main.js')) .pipe(buffer()) .pipe(gulp.dest('./build/')); }); //Vendor js gulp.task('vendor_js', function() { // Grabs the app.js file browserify({ entries: ['./src/app/vendor.js'] }) .bundle() .pipe(source('vendor.min.js')) .pipe(buffer()) .pipe(uglify({ mangle: false })) .pipe(gulp.dest('./build/')); }); gulp.task('default', ['app_js', 'vendor_js']);
请确保在index.html使用main.js之前包含vendor.js
<html> <body> <!--Vendor js, See src/vendor.js--> <script type="text/javascript" src="vendor.min.js"></script> <!--App scripts, See src/app.js--> <script type="text/javascript" src="main.js"></script> </body> </html>