如何在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']);