Exclude files from node_modules

[maelp]

Here is what I'm doing with Gulp:

• creating a dependencies.js file which uses bundle.require to export lodash, d3, ...
• creating a app.js file which uses bundle.external to tell browserify not to resolve lodash, d3, ...
• my Gulpfile.js uses lodash for convenience, so it is in my node_modules directory

the app.js file does:

var d3 = require('d3'); // works fine
var lodash = require('lodash'); // error: Cannot find module 'Hze43j'
var lodash = require('' + 'lodash'); // works

The problem is that gulp-browserify tries to be smart during compile-time and tries to replace require('lodash') with a require('Hze43j') which must correspond to node_modules/lodash (which I do not include in my build since I use a bundle.external('lodash')), and does not try to do it when I do the require('' + 'lodash')

Is it possible to tell browserify to not try to modify module names that are declared as external even if they appear in the node_modules directory?

[sogko]

Hi @maelp,

gulp-browserify has not been maintained for quite some time and won't be anytime in the near future.

It is possible to use the original browserify library in your gulpfile.js. Using it would definitely help in having your require(''+'lodash') and bundle.require() + bundle.external() issues (I just did a quick test and I can verify that it worked)

If you need help to replacing gulp-browserify with browserify, you can share your gulpfile.js and I can see what I can do about it.

I've also written a post on using the original browserify library in gulp: http://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

[tiye]

@sogko I follower your post but found it is quite hard to work with plumber to catch exception. https://www.npmjs.org/package/gulp-plumber

  watch glob: './build/js/**/*.js', ->
    b = browserify debug: no
    b.add './build/js/main'
    b.external 'react'
    .bundle()
    .pipe source('main.js')
    .pipe gulp.dest('build/')
    .pipe reloader(project)

or even:

  watch glob: './build/js/**/*.js', ->
    gulp
    .src './build/js/main.js'
    .pipe plumber() # <-- here is plumber
    .pipe transform (filename) ->
      b = browserify filename
      b.external 'react'
      b.bundle()
    .pipe gulp.dest('build/')
    .pipe reloader(project)

Do you have any ideas on it that could share with us?

[sogko]

Here's an equivalent working gulp recipe of what I think you were trying to achieve in javascript. (I believe you are using gulp-watch?)

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var plumber = require('gulp-plumber');
var watch = require('gulp-watch');

gulp.task('browserify', function () {

  watch({
    glob: './build/js/**/*.js'
  }, function () {
    gulp.src('./build/js/main.js')
      .pipe(plumber())
      .pipe(transform(function(filename) {
        var b = browserify(filename);
        b.external('react');
        return b.bundle();
      }))
      .pipe(gulp.dest('./build'));
  });

});

gulp.task('default', ['browserify']);

The only difference from your Coffeescript is that the function attached to watch() should not return the stream (it stops gulp-watch from executing the next time around)

I'm not completely familiar with Coffeescript but I believe here's the equivalent Coffeescript

...
watch glob: './build/js/**/*.js', ->
    gulp
    .src './build/js/main.js'
    .pipe plumber()
    .pipe transform (filename) ->
      b = browserify filename
      b.external 'react'
      b.bundle()
    .pipe gulp.dest('build/')
    .pipe reloader(project)
    return # <--- add this `return` statement
...

You should see gulp-plumber catching exceptions and gulp-watch executing browserify on file changes in ./build/js/**/*.js

[tiye]

@sogko Yes, it's gulp-watch, and the whole gulpfile is here.

I fixed that issue in gulp-watch and it began too work now. Thanks :)

And is also works when I return the files stream:

  watch glob: 'build/js/**/*.js', (files) ->
    gulp
    .src './build/js/main.js'
    .pipe plumber()
    .pipe transform (filename) ->
      b = browserify filename
      b.external 'react'
      b.bundle()
    .pipe gulp.dest('build/')
    .pipe reloader(project)
    return files

[sogko]

@jiyinyiyong Alright, that's great =)