Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exclude files from node_modules #76

Open
maelp opened this issue Aug 14, 2014 · 5 comments
Open

Exclude files from node_modules #76

maelp opened this issue Aug 14, 2014 · 5 comments

Comments

@maelp
Copy link

maelp commented Aug 14, 2014

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
Copy link

sogko commented Aug 16, 2014

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
Copy link

tiye commented Aug 28, 2014

@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
Copy link

sogko commented Aug 28, 2014

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
Copy link

tiye commented Aug 28, 2014

@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
Copy link

sogko commented Aug 28, 2014

@jiyinyiyong Alright, that's great =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants