I'd like to use my NodeJS module in the browser - so I'm using browserify to process it.

Now, how can I stop browserify from including the module's dependencies in the bundle file? In this case the dependency is lodash and I'll be loading it separately in the index.html.

Here's what I've got so far:

index.html

<script src="lodash.js"></script>
<script src="my-module.js"></script>

index.js

var _ = require('lodash');

_.each([0, 1, 2], function(item) {
    console.log(item);
});

gulp.js

var browserify = require('browserify'),
  source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  return browserify()
    .require('./index.js', {
      expose: 'my-module'
    })
    .bundle()
    .pipe(source('my-module.js'))
    .pipe(gulp.dest('./'));
});

I'd like to use my NodeJS module in the browser - so I'm using browserify to process it.

Now, how can I stop browserify from including the module's dependencies in the bundle file? In this case the dependency is lodash and I'll be loading it separately in the index.html.

Here's what I've got so far:

index.html

<script src="lodash.js"></script>
<script src="my-module.js"></script>

index.js

var _ = require('lodash');

_.each([0, 1, 2], function(item) {
    console.log(item);
});

gulp.js

var browserify = require('browserify'),
  source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  return browserify()
    .require('./index.js', {
      expose: 'my-module'
    })
    .bundle()
    .pipe(source('my-module.js'))
    .pipe(gulp.dest('./'));
});

• javascript
• node.js
• gulp
• browserify

• 1 Why do you want to load it separately? The main goal of browserify is to bundle everything... – loganfsmyth Commented Feb 25, 2015 at 20:50
• 1 Well, the front-end app (index.html) already has lodash _ as global. – Pablo Commented Feb 25, 2015 at 20:51
• Maybe you should change the front-end app? Leaking globals isn't exactly a best-practice. – Ben Commented Feb 25, 2015 at 21:37
• 1 Sorry but I disagree, I have an Angular SPA with angular and lodash as globals. I see nothing wrong with that. – Pablo Commented Feb 26, 2015 at 7:43
• @loganfsmyth Bundling everything makes development easier, but why would you want to bundle dependencies during a deployment? Most mon libraries are already hosted on Google and Cloudflare's CDNs; furthermore, users' browsers probably have these libs cached already. You lose that speed advantage by bundling everything. – nick Commented Dec 16, 2015 at 2:11

3 Answers 3

browserify-shim offers the option of setting up globals.

Here are the changes I've made to my code.

package.json

{
  "browserify-shim": {
    "lodash": "global:_"
  },
  "browserify": {
    "transform": ["browserify-shim"]
  }
}

gulp.js

gulp.task('browserify', function() {
  return browserify('./index.js')
    .require('./index.js', {
      expose: 'my-module'
    })
    .transform('browserify-shim', {
      global: true
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'));
});

There's an option to exclude files:

Usage: browserify [entry files] {OPTIONS}
[...]
--ignore, -i Replace a file with an empty stub. Files can be globs.
--exclude, -u Omit a file from the output bundle. Files can be globs.

https://github./substack/node-browserify#usage

And the corresponding exclude function:

b.exclude(file)

Prevent the module name or file at file from showing up in the output bundle.

If your code tries to require() that file it will throw unless you've provided another mechanism for loading it.

So you should try this:

return browserify()
  .require('./index.js', {
    expose: 'my-module'
  })
  .exclude('lodash.js')
  .bundle();

I figured this out.

const nodeOnlyModule = eval('require')('module-name');

This way you can trick browserify.