bpb

    0.2.2 • Public • Published

    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

    Install

    npm i bpb

    DownloadsWeekly Downloads

    40

    Version

    0.2.2

    License

    MIT

    Last publish

    Collaborators

    • avatar