browserify transform to safely replace `process.browser` with `true` by working on the Abstract Syntax Tree (AST)
MIT License
browserify transform to safely replace process.browser
with true
by working on the Abstract Syntax Tree (AST)
The browserify/webpack implementation of process
has a special browser
member set to true
, which is not present in
the nodejs/iojs implementation of process
.
// on node
process.browser === undefined
// -> true
// on browser
process.browser === true
// -> true
This can be referenced in isomorphic code that
// example #1
function animateElement(element) {
if (!process.browser){
throw new Error('animateElement function is for use client-side only!');
}
$(element).animate({/*...*/});
}
// example #2
function getCookie(name) {
return process.browser ? getCookieFromWindow(name) : getCookieFromRequest(req, name);
}
This is where bpb (short for "browserify-processisfy.browserify") comes in.
For optimized build-sizes and or security, use bpb in combination with unreachable-branch-transform (or a good minifier like UglifyJS) to strip out server-side-only code.
// example #1 after bpb
function animateElement(element) {
if (!true){
throw new Error('animateElement function is for use client-side only!');
}
$(element).animate({/*...*/});
}
// example #1 after bpb + unreachable-branch-transform
function animateElement(element) {
$(element).animate({/*...*/});
}
// example #2 after bpb
function getCookie(name) {
return true ? getCookieFromWindow(name) : getCookieFromRequest(req, name);
}
// example #2 after bpb + unreachable-branch-transform
function getCookie(name) {
return getCookieFromWindow(name);
}
bpb can be used as a browserify transform, a transform stream, or a synchronous function.
All options are passed directly to falafel which passes them directly to acorn.
// as a browserify transform
var browserify = require('browserify');
var fs = require('fs');
browserify('input.js')
.transform('bpb', {/* options */})
.transform('unreachable-branch-transform')
.bundle()
.pipe(fs.createWriteStream('output.js'));
// as a transform stream
var fs = require('fs');
var bpb = require('bpb');
var unreachable = require('unreachable-branch-transform');
fs.createReadStream('input.js')
.pipe(bpb({/* options */}))
.pipe(unreachable())
.pipe(fs.createWriteStream('output.js'));
// as a synchronous function
var bpb = require('bpb');
var unreachable = require('unreachable-branch-transform');
unreachable.transform(bpb.sync('foo(process.browser ? 1 : 2);', {/* options */}))
// -> 'foo(1)'