如何在browserify中使用排除？ [英] how to use the exclude in browserify?

问题描述

在browserify手册中，排除部分，它给出了一个示例使用排除的方法：

in browserify-handbook, exclude part,it gives an example of using the exclude:

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

然后我们要在main.js中只需要（'jquery'） ：

then we want to just require('jquery') in a main.js:

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

遵从jquery dist包，这样我们就可以编写：

defering to the jquery dist bundle so that we can write:

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

并且没有在bundle.js中显示jquery定义，然后在编译main.js时，您可以-排除jquery：

and not have the jquery definition show up in bundle.js, then while compiling the main.js, you can --exclude jquery:

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

但是当我尝试运行此示例时，出现了错误未捕获的错误：找不到模块'jquery'

but when i try to run this sample,i got an error of "Uncaught Error: Cannot find module 'jquery'"

我知道我是否使用独立版本，我只能使用'jquery'作为全局变量，但它不是模块化的，因此我仍然想使用 require（'jquery'）作为示例，因此，我应该怎么做才能实现它？

i know if i use standalone,i can just use 'jquery' as a global variable, but it's not modular, so i still want to do as the sample using "require('jquery')", so,what shall i do to achieve it?

推荐答案

我终于使用以下信息找到了此功能：

I finally got this functionality working using information found here:

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

我想知道您找到的文档是否已经过时...

I wonder if the docs you found are out of date now...

上面链接中的工作解决方案使用 '-x'选项（'external'）而不是'-u'选项（'exclude '）

The working solution in the above link uses the '-x' option ('external') rather than the '-u' option ('exclude')

链接的文章还演示了如何使用gulp进行设置。

The linked article also demonstrates how to set this up using gulp.

我正在粘贴上面链接的网站中的相关内容：

I'm pasting the relevant content from the above-linked web site:

$ 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

在浏览器中，您需要包括所有这三个文件

In the browser, you need to include all those 3 files

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

更新：我发布的链接似乎无效，因此我包括我当前的gulpfile.js。我是gulp和javascript的新手，所以也许有更好的方法来做这些事情。但这当前的设置基本上可以正常工作：

Update: The link I posted does not seem to be working so I'm including my current gulpfile.js. I'm new to gulp and javascript, so there may be a better way to do this stuff. But this current setup does basically work:

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

这篇关于如何在browserify中使用排除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！