在browserify-handbook中,排除part,它给出了使用exclude的示例:
$ npm install jquery $ browserify -r jquery --standalone jquery > jquery-bundle.js
那么我们想在main.js中要求('jquery'):
var $ = require('jquery'); $(window).click(function () { document.body.bgColor = 'red' });
推迟到jquery dist bundle,这样我们就可以写:
并且没有在bundle.js中显示jquery定义,然后在编译main.js时,你可以--exclude jquery:
browserify main.js --exclude jquery > bundle.js
但当我尝试运行此示例时,我收到"未捕获错误:无法找到模块'jquery'"的错误
我知道如果我使用独立,我可以使用'jquery'作为全局变量,但它不是模块化的,所以我仍然希望使用"require('jquery')"作为样本,所以,我该怎么做实现这一目标?
我终于使用此处的信息来使用此功能:
https://truongtx.me/2014/03/20/browserify-bring-nodejs-modules-to-browser/
我想知道你发现的文档现在已经过时了......
上述链接中的工作解决方案使用'-x'选项('external')而不是'-u'选项('exclude')
链接的文章还演示了如何使用gulp进行设置.
我正在粘贴上述链接网站的相关内容:
$ browserify -r foo.js > foo-out.js $ browserify -r d3-browserify > d3-browserify-out.js
对于main.js
$ browserify -x ./foo.js -x d3-browserify main.js > main-bundle.js
在浏览器中,您需要包含所有这3个文件
更新:我发布的链接似乎没有工作,所以我包括我当前的gulpfile.js.我是gulp和javascript的新手,所以可能有更好的方法来做这些事情.但是这个当前的设置基本上可行:
var browserify = require('browserify'); var gulp = require('gulp'); var watchify = require('watchify'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var gutil = require('gulp-util'); var del = require('del'); const PATH_OPTS = { src_dir: './client/js/src/', main_file_path: './client/js/src/main.js', output_file_name: 'disco.js', output_dir: './public/js/', common_lib_file_name: 'common.js' }; const LIBS = ['paper', 'jquery', 'tocktimer']; gulp.task("clientlib", function() { var bundler = browserify({ debug: false }); LIBS.forEach(function(lib) { bundler.require(lib); }); bundler.bundle() .pipe(source(PATH_OPTS.common_lib_file_name)) // uglify seems to need a buffered stream... .pipe(buffer()) .pipe(uglify()) .on('error', gutil.log) .pipe(gulp.dest(PATH_OPTS.output_dir)); }); gulp.task('client', function () { var bundler = browserify({ debug: true, cache: {}, packageCache: {}, fullPaths: true }); bundler = watchify(bundler); bundler.on('update', function(){ bundle(bundler); }); bundler.on('log', function(msg) { gutil.log(msg); }); bundler.add(PATH_OPTS.main_file_path); LIBS.forEach(function(lib) { bundler.external(require.resolve(lib, { expose: lib })); }); return bundle(bundler); }); function bundle(bundler) { return bundler.bundle() .pipe(source(PATH_OPTS.output_file_name)) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true})) // Add transformation tasks to the pipeline here. .pipe(uglify()) .on('error', gutil.log) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(PATH_OPTS.output_dir)); } gulp.task('lint', function() { return gulp.src(PATH_OPTS.src_dir + '*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); gulp.task('clean', function () { return del([ PATH_OPTS.output_dir + '/*.*' ]); }); gulp.task('full', ['lint', 'clean', 'clientlib', 'client']); gulp.task('default', ['lint', 'client']);