[英]How to include node_modules in a separate browserify vendor bundle
我正在嘗試將AngularJS應用轉換為使用browserify。 我使用napa在node_modules中安裝了所有的bower包。 現在我想將它們瀏覽到一個單獨的供應商包中,並將它們聲明為“外部”依賴項。 我想給它們別名,這樣我就可以“require('angular')”而不是“require('angular / angular')”,因為看起來你可以用外部來做。
我見過的例子(例如http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/ )都假設我已將供應商文件下載到'lib'目錄中。 我想從node_modules中捆綁我的供應商文件。 看起來應該很容易,但我看不出怎么做。
我只是想做同樣的事情。 我認為你需要使用--require
for vendor bundle和--export
for the application's,這樣依賴關系就不會被捆綁兩次。
這對我使用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']);
當然,這個解決方案很難維護...所以我修補了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']);
這是我能想到的最好的...請告訴我你是否找到了更好的方法。
我也面臨這個問題。 因為當所有供應商庫在同一個文件中時它是巨大的文件。 因此瀏覽器始終堅持下載超過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']);
在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>
這個解決方案很棒:
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'));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.