Git Product home page Git Product logo

bpb's Introduction

bpb

browserify transform to safely replace process.browser with true by working on the Abstract Syntax Tree (AST)

build status dependencies dev-dependencies

npm

introduction

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

  • adjusts it's behavior depending on which environment it's in
  • is fully portable within the nodejs/iojs/browserify/webpack ecosystem, and
  • is concise and Don't Repeat Yourself (DRY)
  // 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);
  }

usage

bpb can be used as a browserify transform, a transform stream, or a synchronous function.

options

  • ecmaVersion: Must be either 3, 5, or 6. Default is 5.

All options are passed directly to falafel which passes them directly to acorn.

examples

  // 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)'

changelog

0.2.2

  • emit errors rather than throw them

0.2.1

  • return passthrough for json files

0.2.0

  • added es6 support

0.1.1

  • added changelog to readme
  • include readme in package files

0.1.0

  • safe implementation
  • advanced tests

0.0.1

  • tests
  • initial dumb implementation

bpb's People

Contributors

parshap avatar zenflow avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

parshap

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.