transpilify

Applies browserify transforms to your source code, without actually bundling it.

This is useful if you have a module that would typically use some browserify transforms (like glslify or browserify-css), but you would like to publish a bundler-agnostic distribution to npm.

work in progress

This module is still a work in progress and may be subject to more changes.

Install

With npm:

npm install -g transpilify

API Usage

transpile = createTranspiler([opt])

Returns a function, transpile, which creates a transform stream. The options:

• transform a transform or array of transforms, same usage as browserify
• basedir the base directory used to resolve transform names from

The transform elements can be a string (local dependency) or function (conventional transform stream). You can use a tuple to specify the transform and its options. For example:

var transpiler = createTranspiler({
  transform: [
    // local dependency
    'brfs',
    // transform + options
    [ 'glslify', { transform: [ 'glslify-hex' ] },
    // transform function
    require('babelify').configure({
      presets: [ 'es2015' ]
    })
  ]
})

stream = transpiler(filename)

Creates a new transform stream for the given filename, reading it from disk.

For example:

var createTranspiler = require('transpilify')
var transpiler = createTranspiler({
  transform: 'brfs'
})

transpiler('src/index.js')
  .pipe(process.stdout)

CLI Usage

Accepts a single file (to stdout or --out-file) or a single directory (to --out-dir).

# to stdout
transpilify src/index.js [opts]

# to file
transpilify src/index.js --out-file build.js [opts]

# transpile whole directory
transpilify src/ --out-dir dist/ [opts]

Options:

• --transform, -t are written like browserify CLI transforms; supports subarg
  • e.g. --transform brfs
• --out-file, -o write results to a file
• --out-dir, -d transpile directory & contents to destination
• --ignore, -i a pattern or array of glob patterns to ignore (will not emit files matching these globs)
• --extensions, -x
  • a list of comma-separated extensions to accept for transformation
  • defaults to ".js,.jsx,.es6,.es"
• --quiet do not print any debug logs to stderr

Browserify Examples

For example, we have a Node/Browser index.js file:

var fs = require('fs')
var str = fs.readFileSync(__dirname + '/hello.txt', 'utf8')
console.log(str)

And our static file:

Hello, world!

After installing brfs locally as a devDependency, we can transpile:

transpilify index.js --transform brfs > dist/index.js

The resulting dist/index.js file will have the contents statically inlined, without any additional overhead of a traditional bundler.

console.log("Hello, world!")

Another example, using babelify and presets:

transpilify index.js -t [ babelify --presets [ es2015 react ] ] > bundle.js

Custom Transform Example

Say you want a simple transform for your Node/Browser/whatever module, without the complexities of a bundler, babel plugins, or what have you.

Add a transform:

// uppercase.js
var through = require('through2')
module.exports = function (filename) {
  return through(function (buf, enc, next) {
    next(null, buf.toString().toUpperCase())
  })
}

Now you can reference the uppercase.js file during transpilation:

transpilify index.js -t ./uppercase.js

This will uppercase your entire source file.

Roadmap / TODO

• Investigate better source map support