Browserify – Avoid output of absolute paths

Question

In my Project I am using Browserify (programmatically with gulp). In my main javascript file I am requiring modules A and B. A is also using B. In the output of Browserify I can find the absolute path to module A.

The output looks like this:

!function t(n,o,r){function e(s,a){if(!o[s]){if(!n[s]){var u="function"==typeof require&&require;if(!a&&u)return u(s,!0);if(i)return i(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var f=o[s]={exports:{}};n[s][0].call(f.exports,function(t){var o=n[s][1][t];return e(o?o:t)},f,f.exports,t,n,o,r)}return o[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)e(r[s]);return e}({1:[…]
    …
10:[function(t,n){n.exports=t(9)},{"/Applications/MAMP/htdocs/Projects/xyz/node_modules/moduleA/node_modules/moduleB/index.js":9}]},{},[1]);

Here is the relevant part of the gulpfile.js:

browserify(['./app/js/main.js'], {})
  .bundle()
  //Pass desired output filename to vinyl-source-stream
  .pipe(source('main.min.js'))
  //convert from streaming to buffered vinyl file object
  .pipe(buffer())
  // Start piping stream to tasks!
  .pipe(gulp.dest('app/js/'));

How can I avoid this? I already tried several options of Browserify but it did not help. Side note: The two modules are being installed through npm but from GitHub because they are not published on npm.

Answer 1

You need to set fullPaths to false. For additional compression, have a look at bundle-collapser:

var collapse = require('bundle-collapser/plugin');

browserify(['./app/js/main.js'], { fullPaths: false })
  .plugin(collapse)
  .bundle()
  //Pass desired output filename to vinyl-source-stream
  .pipe(source('main.min.js'))
  //convert from streaming to buffered vinyl file object
  .pipe(buffer())
  // Start piping stream to tasks!
  .pipe(gulp.dest('app/js/'));

Also worth noting that you don't need to buffer the contents, unless you're piping through to uglify or some other non-streaming compatible transform.