如何在browserify中使用排除？

Question

在browserify-手册，exclude part，它提供了使用排除的例子：

$ npm install jquery 
$ browserify -r jquery --standalone jquery > jquery-bundle.js 

那么我们想只需要在main.js（ 'jQuery的'）：

var $ = require('jquery'); 
$(window).click(function() { document.body.bgColor = 'red' }); 

defering到jQuery的DIST束，这样我们可以这样写：

<script src="jquery-bundle.js"></script> 
<script src="bundle.js"></script> 

，并没有jQuery的定义bundle.js显示出来，然后同时编译main.js，您可以--exclude的jQuery：

browserify main.js --exclude jquery > bundle.js 

但是当我尝试运行此示例中，我得到了的错误“未捕获的错误：无法找到模块‘jQuery的’”

我知道我是否使用独立的，我可以使用'jquery'作为一个全局变量，但它不是模块化的，所以我仍然想要使用“require（'jquery'）”作为示例，那么，我该做什么实现它？

Answer 1

我终于得到这个功能的使用信息工作在这里找到：

https://truongtx.me/2014/03/20/browserify-bring-nodejs-modules-to-browser/

不知你是否发现文档是从现在过时......

在上面的链接工作解决方案使用的 '-x' 选项（ '外部'），而不是 '-u' 选项（ '排除'）

链接的文章还演示了如何使用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个文件

<script src="foo-out.js"></script> 
<script src="d3-browserify-out.js"></script> 
<script src="main-bundle.js"></script> 

更新：我发布的链接似乎没有工作，所以我包括我目前的gulpfile.js。我是新来的吞咽和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']);