如何在单独的 browserify 供应商捆绑包中包含 node_modules
Posted
技术标签:
【中文标题】如何在单独的 browserify 供应商捆绑包中包含 node_modules【英文标题】:How to include node_modules in a separate browserify vendor bundle 【发布时间】:2014-04-15 07:45:33 【问题描述】:我正在尝试将 AngularJS 应用程序转换为使用 browserify。我已经使用 napa 在 node_modules 中安装了我所有的凉亭包。现在我想将它们浏览到一个单独的供应商包中,并将它们声明为“外部”依赖项。我想给它们起别名,这样我就可以“require('angular')”而不是“require('angular/angular')”,就像你可以用外部一样。
我看到的示例(例如http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/)都假设我已将供应商文件下载到“lib”目录中。我只想从 node_modules 捆绑我的供应商文件。看起来应该很容易,但我不知道该怎么做。
【问题讨论】:
【参考方案1】:我只是想做同样的事情。我认为您需要将--require
用于供应商捆绑,将--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']);
这是我能想到的最好的方法......如果你找到更好的方法,请告诉我。
【讨论】:
感谢奥斯卡的回复。我暂时搁置了我的 Browserify 冒险,所以很遗憾无法验证这个答案。当我重新审视这个问题时,我会尽量记住测试并接受你的答案。So I patched browserify
你有机会把它作为拉取请求发送吗?
你好,这个补丁已经被合并了here。
是否可以只获取前端依赖项而不是获取 package.json 中的所有依赖项(包括 gulp 本身)?我不想将 gulp 本身捆绑在 browserify 包中。
@apple16 这就是devDependencies
的用途【参考方案2】:
我也面临这个问题。因为当所有供应商库都在同一个文件中时,它是一个巨大的文件。所以浏览器总是卡在下载超过 10MB 的文件。文件缩小也不是解决方案,因为编译需要更多时间并且对开发没有帮助。
我为单独的节点模块和应用程序脚本保留了vendor.js
和app.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']);
确保在使用main.js
之前在index.html
中包含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>
【讨论】:
【参考方案3】:这个solution 看起来很棒:
var packageJSON = require('./package.json');
var dependencies = Object.keys(packageJSON && packageJSON.dependencies || );
gulp.task('vendor', function()
return browserify()
.require(dependencies)
.bundle()
.pipe(source('vendor.bundle.js'))
.pipe(gulp.dest(__dirname + '/public/scripts'));
);
【讨论】:
以上是关于如何在单独的 browserify 供应商捆绑包中包含 node_modules的主要内容,如果未能解决你的问题,请参考以下文章