Browserify - avoid outputting absolute paths
In my project I am using Browserify (programmatically with gulp). In my main javascript file, I require modules A and B. A also uses B. In the Browserify output, I can find the absolute path to module A.
The result 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 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've already tried several variations of Browserify, but it didn't help. Side note: two modules are installed via npm, but from GitHub because they are not published to npm.
source to share
You need to install fullPaths
in false
. For additional compression, take 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/'));
It's also worth noting that you don't need to buffer the content, unless you are working your way to uglify or some other non-streaming transform.
source to share